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

以下是工作演示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());
    });
});

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

试试这个：

$(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放入数组中）

创建表值的列表/数组

3 个答案: