如何为 Table 单元格而不是对象或 NaN 获取 InnerHTML

Question

我正在尝试使用 JavaScript 创建一个包含 HTML table 中所有数据的字符串（可以更改为 JQuery）。通过使用下面的这种方法，我收到了一个 NaN 值，而不是数据（数字）。

function Ard() {
    var table = document.getElementById("tblData");
    var dataStr = "";
    for (var i = 0, row; row = table.rows[i]; i++) {
      for (var j = 0, col; col = row.cells[j]; j++) {
          var toAdd = col;
          dataStr += toAdd;
      }
    }
};

我也试过 jQuery 方法，但它只返回一个 HTML 对象。需要注意的是，打印'col'值到控制台时，数据是正确采集的（实际值）。

我用的table是用户编辑的table，但保存为标准HTMLtable。下面是 table 的基本代码，如果它有助于解决问题。

<table id="tblData" class="table table-hover">
    <thead>
        <tr>
            <th>Date</th>
            <th>Time</th>
            <th>Treatment Number</th>
            <th>Cell Number</th>
            <th>Waste Container Number</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

关于如何获取内部HTML并将其正确添加到字符串的任何想法？

我还想通过逐列循环（可能是一组两个 for 或每个循环？）来执行此操作，以便我知道我从哪一列抓取。

Answer 1

使用 jQuery 您可以 select 所有行并遍历它们并获取文本：

var str = "", values = [];
$("#tblData").find('tbody').find('tr').each(function() {
    //You can concatenate a string or push the values to an array
    str += $(this).text();
    values.push($(this).text());
});

console.log(str, values);

Answer 2

你可以用纯js来做:

function Ard() {
    var table = document.querySelectorAll("#tblData tr th");
    var dataStr = "";
    for (var i = 0; i < table.length; i++) {
       dataStr += table[i].innerHTML;
    }
};

JSFiddle Demo

Answer 3

这会将 table <td> 和 post 中的所有文本放入文本区域（仅用于演示目的）：

$('#out').val($('#tblData td').text())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tblData" class="table table-hover">
    <thead>
        <tr>
            <th>Date</th>
            <th>Time</th>
            <th>Treatment Number</th>
            <th>Cell Number</th>
            <th>Waste Container Number</th>
        </tr>
   </thead>
   <tbody>
        <tr>
            <td>some</td><td>extra</td><td>data</td>
        </tr>
    </tbody>
</table>
<textarea id="out" rows=10 cols=60></textarea>

更新：

如果您 "just" 想将 <td> 内容放入单个变量中，您可以这样做：

var str=$('#tblData td').text()

我扩展了你的例子，所以你会得到一个实际的结果。

Answer 4

既然你可以使用 jquery,

var dataStr = "";
$('#tblData > tbody').each(function(e) {
  dataStr += $(this).text();
});
console.log(dataStr);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tblData" class="table table-hover">
  <thead>
    <tr>
      <th>Date</th>
      <th>Time</th>
      <th>Treatment Number</th>
      <th>Cell Number</th>
      <th>Waste Container Number</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>10101</td>
      <td>20202</td>
      <td>30303</td>
      <td>40404</td>
      <td>50505</td>
    </tr>
    <tr>
      <td>wowowo</td>
      <td>sksksk</td>
      <td>alalal</td>
      <td>qpqpqp</td>
      <td>zmzmzm</td>
    </tr>
  </tbody>
</table>

如果你想让 dataStr 也有 <td> 标签，你应该使用，

dataStr += $(this).html()

编辑

如果你还想访问当前的列索引，你可以使用这个。但在这里，dataStr 最终将包含一个单行字符串，用于连接 <td> 标签内的所有文本。

$('#tblData > tbody > tr > td').each(function(e) {
  var currentColNo = $(this).index();
  dataStr += $(this).html();
});

如何为 Table 单元格而不是对象或 NaN 获取 InnerHTML

How to Get InnerHTML for Table Cell instead of an object or NaN

html

javascript

jquery

html-table

JSFiddle Demo