用数组字符串填充表

时间：2015-05-18 06:15:05

标签： javascript html arrays css-tables

我正在尝试使用数组中的值填充表。如何使用库存数组中定义的字符串填充第二列（AKA“正确答案”列）？我正在尝试使用“正确答案”和“您的答案”列正确填充该列，其中包含用户提供的String数组。 （未显示，在另一个类中）。 

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>

2 个答案:

答案 0 :(得分：0)

您可以使用document.write方法并分别填充该列的每一行。或者您可以为该列1,2 ...的每一行提供id，然后在脚本中从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>

答案 1 :(得分：0)

您可以使用querySelectorAll()抓取每个表格单元格，然后在迭代它们时填充它们：

＆＃13;
＆＃13; 
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];
  });
＆＃13; 
.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;}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题