用字符串数组填充 table

Question

我正在尝试用数组中的值填充 table。我如何用 stock 数组中定义的字符串填充第二列（又名 "Correct Answer" 列）？我正在尝试用 "Correct Answers" 和 "Your Answer" 列正确填充用户提供的字符串数组。（未显示，在另一个 class 中）。

var stock = new Array()
        stock[0] = new Array("The")
        stock[1] = new Array("of")
        stock[2] = new Array("and")
        stock[3] = new Array("a")
        stock[4] = new Array("to")
    stock[5] = new Array("in")
        stock[6] = new Array("is")
        stock[7] = new Array("you")
        stock[8] = new Array("that")
        stock[9] = new Array("it")
    stock[10] = new Array("he")
        stock[11] = new Array("for")
        stock[12] = new Array("was")
        stock[13] = new Array("on")
        stock[14] = new Array("are")

<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-

width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-

style:solid;border-width:1px;overflow:hidden;word-break:normal;}

</style>
<table class="tg" style="undefined;table-layout: fixed; width: 363px">
<colgroup>
<col style="width: 121px">
<col style="width: 121px">
<col style="width: 121px">
</colgroup>
  <tr>


<th class="tg-031e">Question:</th>
<th class="tg-031e">Correct Answer:</th>
<th class="tg-031e">Your Answer:</th>
  </tr>
  <tr>

<td class="tg-031e">1.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
  </tr>
  <tr>

<td class="tg-031e">2.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
  </tr>
  <tr>
<td class="tg-031e">3.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
  </tr>
  <tr>
<td class="tg-031e">4.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
  </tr>
  <tr>
<td class="tg-031e">5.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
  </tr>
  <tr>
<td class="tg-031e">6.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
  </tr>
  <tr>
<td class="tg-031e">7.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
  </tr>
  <tr>
<td class="tg-031e">8.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
  </tr>
  <tr>
<td class="tg-031e">9.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
  </tr>
  <tr>
<td class="tg-031e">10.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
  </tr>
  <tr>
<td class="tg-031e">11.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
  </tr>
  <tr>
<td class="tg-031e">12.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
  </tr>
  <tr>
<td class="tg-031e">13.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
  </tr>
  <tr>
<td class="tg-031e">14.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
  </tr>
  <tr>
<td class="tg-031e">15.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
  </tr>
</table>

Answer 1

您可以使用 document.write 方法并单独填充该列的每一行。或者您可以为该列的每一行提供 id 1,2... 然后在脚本中从 1 迭代到最大 Id 并使用 document.getElementById(idNumber).innerHTMl 方法设置给定值。

给你举个例子

<p id="1"></p>
<p id="2"></p>
<p id="3"></p>

<script>
for(i=1;i<=3;i++)
{
document.getElementById(i).innerHTMl=yourDataOverHere
}
</script>

Answer 2

您可以使用 querySelectorAll() 获取每个 table 单元格，然后在遍历它们时填充它：

var stock = [["The"], ["of"], ["and"], ["a"], ["to"],
             ["in"], ["is"], ["you"], ["that"], ["it"],
             ["he"], ["for"], ["was"], ["on"], ["are"]];

var nodes = document.querySelectorAll('td.tg-031e:nth-child(2)');
[].forEach.call(nodes, function(node, index) {
  node.innerText = stock[index][0];
  });

.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}

<table class="tg" style="undefined;table-layout: fixed; width: 363px">
<colgroup>
<col style="width: 121px">
<col style="width: 121px">
<col style="width: 121px">
</colgroup>
  <tr>


<th class="tg-031e">Question:</th>
<th class="tg-031e">Correct Answer:</th>
<th class="tg-031e">Your Answer:</th>
  </tr>
  <tr>

<td class="tg-031e">1.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
  </tr>
  <tr>

<td class="tg-031e">2.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
  </tr>
  <tr>
<td class="tg-031e">3.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
  </tr>
  <tr>
<td class="tg-031e">4.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
  </tr>
  <tr>
<td class="tg-031e">5.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
  </tr>
  <tr>
<td class="tg-031e">6.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
  </tr>
  <tr>
<td class="tg-031e">7.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
  </tr>
  <tr>
<td class="tg-031e">8.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
  </tr>
  <tr>
<td class="tg-031e">9.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
  </tr>
  <tr>
<td class="tg-031e">10.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
  </tr>
  <tr>
<td class="tg-031e">11.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
  </tr>
  <tr>
<td class="tg-031e">12.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
  </tr>
  <tr>
<td class="tg-031e">13.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
  </tr>
  <tr>
<td class="tg-031e">14.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
  </tr>
  <tr>
<td class="tg-031e">15.</td>
<td class="tg-031e"></td>
<td class="tg-031e"></td>
  </tr>
</table>

用字符串数组填充 table

Filling a table with array of Strings

html

javascript

arrays

css-tables