Question

我有一个简单的HTML表，每个表可以包含2-5行和6列。如何获得每行1和2列的值？我还想在这样的输出中显示它：Column1 Column2, Column1 Column2, Column1 Column2如果它有3行就是输出。

编辑：创建了一个jsfiddle来描述我想要做的事情以及我到目前为止的示例代码https://jsfiddle.net/y6eoc0b4/

Answer 1

你可以这样做

var myTable = document.getElementById("myTable");
var rows = myTable.getElementsByTagName("tr");
console.log(rows);
var output = [];
for(var i = 0; i< rows.length; i++){

    var cells = rows[i].getElementsByTagName("td");
  output.push(cells[0].innerText+" "+cells[1].innerText)
}
document.getElementsByClassName("output")[0].innerText = output;

https://jsfiddle.net/LyswLtf8/

Answer 2

JSfiddle基于您的评论here

＆＃13;

[profileID] as ( (id * 19379 - 62327) % 99991) NOT NULL UNIQUE

＆＃13;

//step first: select items like this
var fisrstTdArr = document.querySelectorAll(".location table tbody tr td:first-child");
var secondTdArr = document.querySelectorAll(".location table tbody tr td:nth-child(2)");

// or like this
var fisrstTdArr2 = document.querySelectorAll("#myId tbody tr td:first-child");
var secondTdArr2 = document.querySelectorAll("#myId tbody tr td:nth-child(2)");

// or even shorter if you have only one table on the page
var fisrstTdArr3 = document.querySelectorAll("td:first-child");
var secondTdArr3 = document.querySelectorAll("td:nth-child(2)");

for (var i = 0; i<fisrstTdArr.length; i++) { // than loop
  console.log ('select method 1, fisrts column: ' + fisrstTdArr[i].innerText); // and use
  console.log ('select method 1, second column: ' + secondTdArr[i].innerText);
  console.log ('select method 2, fisrts column: ' + fisrstTdArr2[i].innerText);
  console.log ('select method 2, second column: ' + secondTdArr2[i].innerText);
  console.log ('select method 3, fisrts column: ' + fisrstTdArr3[i].innerText);
  console.log ('select method 3, second column: ' + secondTdArr3[i].innerText);
}

＆＃13;

Answer 3

这是一个可修复的代码，可以处理包含任意数量的列和任意行数的表。

＆＃13;

var table = document.querySelector('#my-table'),
		trs   = table.querySelectorAll('tr'),
    outputDiv = document.querySelector('#output') ,
    tds = [],
    i, j,
    output = ''; 
    
  for (i = 0; i < trs.length; i += 1) {
  	tds = trs[i].querySelectorAll('td');
    output += "Row #" + (i + 1) + "<br>";
    for (j = 0; j < tds.length; j += 1) {
    	output += tds[j].innerText + ' ';
    }
    output += '<br>-----------------<br>';
  }
  
  outputDiv.innerHTML = output;

＆＃13;

<table border=1 id="my-table">
  <tr>
    <td>Row1-Column1</td>
    <td>Row1-Column2</td>
    <td>Row1-Column3</td>
    <td>Row1-Column4</td>
    <td>Row1-Column5</td>
  </tr>
  <tr>
    <td>Row2-Column1</td>
    <td>Row2-Column2</td>
    <td>Row2-Column3</td>
    <td>Row2-Column4</td>
    <td>Row2-Column5</td>
  </tr>
  <tr>
    <td>Row3-Column1</td>
    <td>Row3-Column2</td>
    <td>Row3-Column3</td>
    <td>Row3-Column4</td>
    <td>Row3-Column5</td>
  </tr>
</table>
<br>
<span style="font-weight: bold">Desired Output:</span> "Row1-Column1 Row1-Column2, Row2-Column1 Row2-Column2, Row3-Column1 Row3-Column2"
<br>
<br>
<span>Output:</span> <div id="output"></div>

＆＃13;

JSFiddle

如何在每个表的表中获取特定列的文本值？

3 个答案: