如何使用jquery颠倒html中表列的顺序

Question

我有一个有10列的html表(即1 2 3 4 5 6 7 8 9 10 )，我想使用Jquery...

我有下面的代码，但这个代码非常长，任何人可以提供简短的代码这..

$(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标题)的超文本标记语言表格，我想水平翻转列(即10 9 8 7 6 5 4 3 2 1标题)

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

$("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。

NOTE解决方案不适用于带分页的表格，但是如果数据很短(只有一页)，您可以尝试一下！

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>

​