Question

我有一个带有10列的html表（即1 2 3 4 5 6 7 8 9 10），我想使用Jquery垂直翻转列（即10 9 8 7 6 5 4 3 2 1）... < / p>

我对此有以下代码，但是此代码很长谁能为此提供简短的代码。

$(function() {
    jQuery.each($("table tr"), function() { 
        $(this).children(":eq(9)").after($(this).children(":eq(0)"));
        $(this).children(":eq(8)").after($(this).children(":eq(0)"));
        $(this).children(":eq(7)").after($(this).children(":eq(0)"));
        $(this).children(":eq(6)").after($(this).children(":eq(0)"));
        $(this).children(":eq(5)").after($(this).children(":eq(0)"));
        $(this).children(":eq(4)").after($(this).children(":eq(0)"));
        $(this).children(":eq(3)").after($(this).children(":eq(0)"));
        $(this).children(":eq(2)").after($(this).children(":eq(0)"));
        $(this).children(":eq(1)").after($(this).children(":eq(0)"));
    });
});

Answer 1

要实现此目的，您可以根据每行中的td个元素构建一个数组，reverse()，然后再次将它们附加回去：

$('table tr').each(function() {
  var tds = $(this).children('td').get().reverse();
  $(this).append(tds);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
</table>

Answer 2

循环td并循环使用.prepend()将元素插入到父对象的第一个。

$("table td").each(function() { 
  $(this).parent().prepend(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
</table>

更新：

@NoumanSaeed：具有11列（即1 2 3 4 5 6 7 8 9 10标头）的html表，我想水平翻转列（即10 9 8 7 6 5 4 3 2 1标头）

在这种情况下，应使用td在选择器中排除最后header个包含:lt()的内容。

$("table td:lt(10)").each(function() { 
    $(this).parent().prepend(this);
});

$("table td:lt(10)").each(function() { 
  $(this).parent().prepend(this);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
    <td>Header</td>
  </tr>
</table>

Answer 3

以上答案是正确的，但您也可以使用CSS。

注意解决方案不适用于具有分页功能的表，但是如果数据较短（仅一页），则可以尝试一下！

if($("html").attr("dir") == "rtl") {
  $("table").css({"direction": "ltr"});
}else{
  $("table").css({"direction": "rtl"});
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
    <td>8</td>
    <td>9</td>
    <td>10</td>
  </tr>
</table>

如何使用jQuery反转HTML中的表列顺序

3 个答案: