Заполнение таблицы массивом строк

Я пытаюсь заполнить таблицу значениями из массива. Как заполнить второй столбец (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>

источник

2015-05-18 B-Squared

Вы можете использовать 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>

источник

2015-05-18 07:21:50

спасибо много! Это было действительно полезно! –

Вы можете использовать метод 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>

источник

2015-05-18 07:00:49

Заполнение таблицы массивом строк

ответ

Смежные вопросы