用字符串數組填充表

Question

我想用數組中的值填充表。我怎樣才能用股票數組中定義的字符串填充第二列（也就是「正確答案」列）？我正在嘗試用「用戶提供的字符串數組」正確填寫「正確答案」和「答案」列。 （未在另一課中顯示）。

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

您可以使用querySelectorAll()抓住每一個表格單元格，然後填充它，而你在它們之間迭代：

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>

Answer 2

您可以使用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>