创建表值列表/数组

Question

我有一个表，其中包含 6 个固定列，如下所示，以及动态创建的可变内容。在每一列中，一个值只能出现一次，但可能不会出现在所有列中。

有没有一种方法可以得到一个列表/数组，其中包含 Cat 列中的所有值和 Vol 列中的卷，如下面的示例变量？

我的桌子：

<table id="myTable">
    <thead>
        <tr>
            <th class="myHeader">Cat 1</th>
            <th>Vol 1</th>
            <th class="myHeader">Cat 2</th>
            <th>Vol 2</th>
            <th class="myHeader">Cat 3</th>
            <th>Vol 3</th>
            //...
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>item1</td><td>8</td><td>item2</td><td>7</td><td>item3</td><td>9</td>
        </tr>
        <tr>
            <td>item3</td><td>5</td><td>item2</td><td>7</td><td>item1</td><td>4</td>
        </tr>
        <tr>
            <td>item2</td><td>1</td><td>item1</td><td>5</td><td>item3</td><td>3</td>
        </tr>
        //...
    </tbody>
</table>

需要的输出：

var item1 = [8, 4, 5]
var item2 = [7, 7, 1]
var item3 = [9, 5, 3]

Answer 1

试试这个：

$(document).ready(function() {

    var items ={
        item1: [],
        item2: [],
        item3: []
    };
    $('#myTable > tbody > tr').each(function() {
        var cols = $(this).find('td');
        for (var col = 0; col < cols.length; col += 2) {
            items[$(cols[col]).text()].push(+$(cols[col + 1]).text());
        }
    });
    console.log(items);
});

工作示例：http://jsfiddle.net/QLyKk/（我将一个项目留空以表明在这种情况下将 0 放入数组中）

Answer 2

一种可能的方法：

var itemsData = {
  item1: [],
  item2: [],
  item3: []
};

var $td = $('#myTable').find('td');

$.each(itemsData, function(itemName) {
  $td.filter(':contains(' + itemName + ')').each(function(el) {
    itemsData[itemName].push(this.nextSibling.innerText);
  });
});

Demo。我已将变量 item1、item2 替换为将它们存储为属性的单个数据对象。这种方法的关键部分是contains 函数，它检查给定元素的文本内容以查找给定的字符串。

这种方法的替代方法是为那些“标题”<td> 元素提供特定的数据属性。例如：

<td data-item="item3">item3</td><td>5</td>
<td data-item="item2">item2</td><td>7</td>
...

... 那么函数的对应部分会变成...

$td.filter('[data-item="' + itemName + '"]').each(function(el) { // ...

Answer 3

这是工作演示http://jsfiddle.net/symonsarwar/9W5Uu/

<table id="myTable">
    <thead>
        <tr>
            <th class="myHeader">Cat 1</th>
            <th>Vol 1</th>
            <th class="myHeader">Cat 2</th>
            <th>Vol 2</th>
            <th class="myHeader">Cat 3</th>
            <th>Vol 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>item1</td><td class="item1">8</td><td>item2</td><td class="item2">7</td><td>item3</td><td class="item3">9</td>
        </tr>
        <tr>
            <td>item3</td><td class="item3">5</td><td>item2</td><td class="item2">7</td><td>item1</td><td class="item1">4</td>
        </tr>
        <tr>
            <td>item2</td><td class="item2">1</td><td>item1</td><td class="item1">5</td><td>item3</td><td class="item3">3</td>
        </tr>
    </body>
</table>

$(function(){
    var item1=new Array();
    var item2=new Array();
    var item3=new Array();
    $('.item1').each(function(){
    item1.push($(this).html());
    });

    $('.item2').each(function(){
    item2.push($(this).html());
    });

    $('.item3').each(function(){
    item3.push($(this).html());
    });
});