Question

我是Java语言的新手，我有一个数组，并希望将其打印在表td中。

这是我的数组：

array = [100, 200, 300];

这是我的桌子：

<table>
  <th> Result</th>
<tbody>
  <tr>
     <td> My result 1</td>
     <td class='result'></td>
  </tr>
  <tr>
     <td> My result 2</td>
     <td class='result'></td>
  </tr>
  <tr>
     <td> My result 3</td>
     <td class='result'></td>
  </tr>
</tbody>
</table>

我想在td中以类名'result'打印我的数组

Answer 1

您可以使用querySelectorAll()和Node.textContent：

const array = [100, 200, 300];

const elements = [...document.querySelectorAll('.result')];

for(let i = 0; i < array.length; i++) {
  elements[i].textContent = array[i];
}

<table>
  <th> Result</th>
<tbody>
  <tr>
     <td> My result 1</td>
     <td class='result'></td>
  </tr>
  <tr>
     <td> My result 2</td>
     <td class='result'></td>
  </tr>
  <tr>
     <td> My result 3</td>
     <td class='result'></td>
  </tr>
</tbody>
</table>

Answer 2

只需遍历数组，并对HTML元素也使用当前索引。

仅适用于ES5的解决方案：

var array = [100, 200, 300];

for (var i = 0; i < array.length; i++){
    document.getElementsByClassName("result")[i].innerHTML = array[i];
}

<table>
  <th> Result</th>
  <tbody>
    <tr>
       <td> My result 1</td>
       <td class='result'></td>
    </tr>
    <tr>
       <td> My result 2</td>
       <td class='result'></td>
    </tr>
    <tr>
       <td> My result 3</td>
       <td class='result'></td>
    </tr>
  </tbody>
</table>

注意：您需要等量的数组元素和带有.result类的元素。

Answer 3

您可以这样做


var result = document.getElementsByClassName("result")


var array = [100,200,300]

for (var i=0;i<result.length;i++){

  result[i].innerHTML = array[i];
}

Demo

Answer 4

为表格标签分配一个id属性，即id =“ tab”。然后添加以下javascript代码

pointer=0
arr=[100,200,300];
// selecting all the tags having result as class name 
var nodes=document.getElementById("tab").getElementsByClassName("result");
arr.forEach((ele)=>{nodes[pointer].innerHTML=ele;pointer+=1});

Answer 5

看这个例子：

我使用querySelectorAll
考虑数组元素和行数是否不同的情况。
还添加了“ .myTable”以防止将其他“ .result”节点定位到所选表之外。

希望有帮助。

<table class="myTable">
  <th> Result</th>
<tbody>
  <tr><td> My result 1</td><td class='result'></td></tr>
  <tr><td> My result 2</td><td class='result'></td></tr>
  <tr><td> My result 3</td><td class='result'></td></tr>
  <tr><td> My result 4</td><td class='result'></td></tr>
</tbody>
</table>

<script>
    const array = [100, 200, 300];
    const rows = document.querySelectorAll('.myTable .result')  // <-- I added '.myTable' to prevent target other '.result' nodes out of the selected table
    
    rows.forEach((row, i) => {
      if (array[i]) row.innerHTML = array[i]  // <-- I replace the innerHTML if the array has content at that index
    });
</script>

Answer 6

希望这可以帮助您...无需根据数组数据更新表。...

表格代码：

<table>
    <th colspan="2" >Result</th>
    <tbody id="myTableBody"></tbody>
</table>

JavaScript代码：

<script>
  var tableRef = document.getElementById('myTableBody');

  var array = [100, 200, 300];

  for (var i = 0; i < array.length; i++){
      tableChild = document.createElement('tr');
      tableChild.innerHTML = "<td> My result "+(i+1)+"</td><td class='result'>"+array[i]+"</td>";
      tableRef.appendChild(tableChild);
  }
</script>

示例：https://codepen.io/Nishanth_V/pen/rEZmxN

Answer 7

var el = document.getElementsByClassName('result');

var array = [100, 200, 300];

for(var i =0 ; i < el.length && i < array.length; ++i) {

    el[i].innerHTML = array[i];

}

Answer 8

您必须将'替换为"并在类中添加数字，之后代码如下：-

<table>
  <th> Result</th>
<tbody>
  <tr>
     <td> My result 1</td>
     <td class="result1"></td>
  </tr>
  <tr>
     <td> My result 2</td>
     <td class="result2"></td>
  </tr>
  <tr>
     <td> My result 3</td>
     <td class="result3"></td>
  </tr>
</tbody>
</table>

您的JavaScript代码如下所示：-

<script>
var array = [100, 200, 300];
array.foreach(function (item, index){
  var resultNum = index + 1;
  document.getElementByClassName("result" + resultNum).innerHTML = item;
});
</script>

在表td中打印数组

8 个答案: