如何通过jQuery以显示顺序获取表列

时间:2015-02-02 08:16:50

标签: jquery html

我试图通过jQuery在数组中保存html表的列。 我试过这样的话:

var arr = new Array();
$("#mytable th").each(function() {
  arr.push($(this).html());
});

问题是,当表具有复杂的标题时,列不是所需的顺序。

示例:

<table id="mytable">
  <thead>
    <tr>
      <th rowspan="2">First Col</th>
      <td colspan="3">Group Col</td>
      <th rowspan="2">Fifth Col</th>
    </tr>
    <tr>
      <th>Second Col</th>
      <th>Third Col</th>
      <th>Forth Col</th>
    </tr>
  </thead>
</table>

我希望数组是这样的:

var arr = {"First Col", "Second Col", "Third Col", "Forth Col", "Fifth Col"};

但它是这样的:

var arr = {"First Col", "Fifth Col", "Second Col", "Third Col", "Forth Col"};

这是一个JsFiddle:http://jsfiddle.net/L2xbaxea/1/

是否有一个简单的解决方案可以按所需的顺序获取列名?

1 个答案:

答案 0 :(得分:0)

jquery逐行获取订单的对象。

使用data-position属性,我们可以订购个性化的方式。

你可以试试这个

<table id="mytable">
    <thead>
        <tr>
            <th data-position="1" rowspan="2">First Col</th>
            <td colspan="3">Group Col</td>
            <th data-position="5" rowspan="2">Fifth Col</th>
        </tr>
        <tr>
            <th data-position="2">Second Col</th>
            <th data-position="3">Third Col</th>
            <th data-position="4">Forth Col</th>
        </tr>
    </thead>
</table>



    var arr = new Array();
    $("#mytable th").sort(sort_li).each(function () {
        arr.push($(this).html());
    });
    alert(arr); 

    function sort_li(a, b) {
        return ($(b).data('position')) < ($(a).data('position')) ? 1 : -1;
    }