从动态 table jQuery 获取所有行

Question

我正在尝试从动态 table 中读取所有行。主要思想是读取所有行并将其存储在数组中以供进一步处理。但是到目前为止我还没有能够得到行数据。下面的代码只有returnstableheaders。

代码如下：

var data = [];

var i = 0;

$('#tempTable td').each(function (index, tr) {
    var tds = $(tr).find('td');

    if (tds.length > 1) {
        data[i++] = {
            action: tds[0].textContent,
            spec: tds[1].textContent,
            data: tds[2].textContent,
            unit: tds[3].textContent,
            upper_tol: tds[4].textContent,
            lower_tol: tds[5].textContent,
            tol_unit: tds[6].textContent,
            def: tds[7].textContent
        }
    }
});

HTML 标记如下所示：

<table id='tempTable'>
    <thead>
        <tr>
            <td class='table_head' width='80px'>Header1</td>
            <td class='table_head' width='435px'>Header2</td>
            <td class='table_head' width='100px'>Header3</td>
            <td class='table_head' width='100px'>Header4</td>
            <td class='table_head' width='100px'>Header5</td>
            <td class='table_head' width='100px'>Header6</td>
            <td class='table_head' width='100px'>Header7</td>
            <td class='table_head' width='80px'>Header8</td>
        </tr>
    </thead>
    <tbody>
        <!-- Rows inserted dynamically here using jQuery -->
    </tbody>
</table>

Answer 1

您已将 table headers 初始化为 'td' 而不是您需要在 'th' 中初始化它们，如下所示..

<table id='tempTable'>
    <thead>
        <tr>
            <th class='table_head' width='80px'>Header1</th>
            <th class='table_head' width='435px'>Header2</th>
            <th class='table_head' width='100px'>Header3</th>
            <th class='table_head' width='100px'>Header4</th>
            <th class='table_head' width='100px'>Header5</th>
            <th class='table_head' width='100px'>Header6</th>
            <th class='table_head' width='100px'>Header7</th>
            <th class='table_head' width='80px'>Header8</th>
        </tr>
    </thead>
    <tbody>
        <!-- Rows inserted dynamically here using jQuery -->
    </tbody>
</table>

另请参阅您选择 table 数据的事件（选择前 table 应填充数据）。

用于从table中选择数据：

//traverse each row
$('#tempTable tr').each(function (index, tr) {
    var cols = [];

    //get td of each row and insert it into cols array
    $(this).find('td').each(function (colIndex, c) {
        cols.push(c.textContent);
    });

    //insert this cols(full rows data) array into tableData array
    tableData.push(cols);
  });

  console.log("tableData: ", tableData);

请找到 fiddle https://jsfiddle.net/Prakash_Thete/frm2ebug/1/ 相同的..

从动态 table jQuery 获取所有行

Get all rows from dynamical table jQuery

html

javascript

jquery

dynamic-tables