Question

我有一张有tbodies的表格。我想创建一个数组，其中包含tbody的第一个td中的值。我怎么能这样做？

我的HTML：

<table id="myTable">
<thead>
    <tr>
        <th>Test1</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>Val1</td>
        <td></td>
        <td></td>
    </tr>
</tbody>
<tbody>
    <tr>
        <td>Val2</td>
        <td></td>
        <td></td>
    </tr>
</tbody>
<tbody>
    <tr>
        <td>Val3</td>
        <td></td>
        <td></td>
    </tr>
</tbody>
<tbody>
    <tr>
        <td>Val4</td>
        <td></td>
        <td></td>
    </tr>
</tbody>

我的数组应该具有以下值：Val1，Val2，Val3，Val4

Answer 1

有一个名为getElementsByTagName(tagName)的函数，它返回一个元素数组。

这样的事情应该有效：

var array = []; //your array
var rows = document.getElementById("myTable").getElementsByTagName("tr");

for(var i = 0; i < rows.length; i++) {
    array[i] = rows[i].getElementsByTagName("td")[0].innerHTML;
}

Answer 2

尝试在此背景下使用$(selector).map()，

var x = $("#myTable > tbody > tr > td:first-child").map(function(){
  return this.textContent;
}).get().join();
console.log(x); //Val1, Val2, Val3, Val4

DEMO

使用Array.prototype.map()和querySelectorAll()，

的纯JavaScript版本

var x = [].map.bind(
  document.querySelectorAll("#myTable > tbody > tr > td:first-child"),function(elem){
     return elem.textContent;
})();
console.log(x); //Val1, Val2, Val3, Val4

DEMO

Answer 3

试试这个：

var bodies = document.getElementById("myTable").tBodies;
var items = [];

for (var i = 0; i < bodies.length; i++)
  items.push(bodies[i].getElementsByTagName("td")[0].innerText);

alert(items);

<table id="myTable">
  <thead>
    <tr>
      <th>Test1</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Val1</td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Val2</td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Val3</td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>Val4</td>
      <td></td>
      <td></td>
    </tr>
  </tbody>

Answer 4

你可以用jQuery做到这一点：

var myArray=[];
$('#myTable tbody tr td:nth-child(1)').each(function(){
	myArray.push($(this).text());
});

Answer 5

只需使用原生javascript apply plugin: 'maven'方法即可。

[Element].getElementsByTagName([TagName])[index]

行// Get the array of <tbody> elements in the document. tbodies = document.getElementsByTagName("tbody"); values = []; // Loop through the array of <tbody> elements. for(var index = 0; index < tbodies.length; index++) { // Add the value of the <td> element to the array of values. values += tbodies[index].firstChild.firstChild.nodeValue; }获取每个values += tbodies[index].firstChild.firstChild.nodeValue元素并找到它<tbody>（firstChild元素）并找到<tr>元素的<tr>（ firstChild元素），然后找到它包含的文本（<td>）。

.nodeValue数组的最终结果为values。

JavaScript从表中获取td

5 个答案:

DEMO

DEMO