Как я могу получить элемент

Question

Это то, что я хочу знать. У меня есть таблица, в которой количество строк зависит от того, какое число находится в счетчике. Это работает, например, если я введу 25 в счетчик, то получится 25 рядов, если я введу 7 в счетчик, получится 7 рядов.

Итак, моя проблема заключается в следующем:

Допустим, в таблице есть несколько строк. У меня есть текстовое поле, в которое пользователь вводит свой вопрос, а затем отправляет вопрос, вопрос должен быть вставлен и отображен в первой строке таблицы в столбце «Вопрос», текстовое поле становится пустым, а пользователь вводит в него свой вопрос. второй вопрос, если пользователь отправит это, тогда вопрос появится во втором ряду, 3-й вопрос в 3-м ряду, 4-й вопрос в 4-м ряду и т. д.

Проблема в том, что каждый раз, когда я отправляю вопрос в таблицу, он создает новую строку. Таким образом, если бы в таблице было 20 пустых строк, потому что я указал в счетчике, что мне нужно 20 вопросов, то происходит каждый раз, когда я отправляю вопрос, каждый раз добавляется новая строка, поэтому отправка 20 вопросов из текстовой области будет означать, что таблица содержит 20 пустых строк и 20 строк с вопросами. Я предполагаю, что это из-за этого, например:

var enumeratorCell = document.createElement("td");

Итак, я хочу знать, как исключить создание элемента для создания новой строки, как я могу получить элемент, чтобы он отправлял вопрос в существующей строке сверху вниз, а не создавал новую строку каждый раз, когда вопрос подан?

Below is my code:

function insertQuestion() {   
var table = document.getElementById("qandatbl");
var tableBody = table.tBodies[0];
var textarea = document.getElementById("questionTxt");

var row = document.createElement("tr");
tableBody.appendChild(row);

var enumeratorCell = document.createElement("td");
enumeratorCell.className = "qid";
row.appendChild(enumeratorCell);

var questionCell = document.createElement("td");
questionCell.className = "question";
row.appendChild(questionCell);

var questionText = textarea.value;
var questionContent = document.createTextNode(questionText);
questionCell.appendChild(questionContent);

            }

HTML:

// table where questions will be inserted into

     <table>

    <?php
    $spinnerCount = $_POST['textQuestion'];
if($spinnerCount > 0) {
   for($i = 1; $i <= $spinnerCount; $i++) {?> // this get the number of questions from the spinner

        <tr>
            <td class="qid"><?php echo $i; ?></td>
            <td class="question"></td>
        </tr>

    </table>


//Text Area and submit button to submit questions

<form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post">
<table id='middleDetails' border='1'>
<tr>
<th class='tblheading' colspan='2'>SESSION DETAILS</th>
</tr>
<tr class='trheight'>
</tr>
<tr>
<td id="questionNum">Question No </td>
</tr>
<tr>
<td id="questionContent">Question:</td> 
<td id="questionTextarea"><textarea rows="5" cols="40" id="questionTxt" name="questionText"></textarea></td>
</tr>
<tr>
<td id="addQuestionRow" colspan='2'><input id="addQuestion" type="button" value="Add Question" name="addQuestionBtn" onClick="insertQuestion()" /></td>
</tr>
</table>
</form>

То, что я говорю, это пустая таблица, ниже таблицы текстовая область и кнопка отправки, учитель вводит вопрос, а когда учитель отправляет вопрос, он идет в первой строке таблицы, так как это первый вопрос, затем учитель повторяет и 2-й вопрос идет в строке 2 и так далее. Но вместо вставки данных в строки, которые уже находятся в таблице, он создает новые строки и вставляет данные в новые строки.

Answer 1

Учитывая существующую таблицу:

<table id="myTable">
   <tr>
      <td>1</td>
      <td>2</td>
   </tr>
   <tr>
      <td>3</td>
      <td>4</td>
   </tr>
</table>

Если вы хотите получить или изменить содержимое существующих ячеек, вы можете сделать это:

// get reference to the table
var t = document.getElementById("myTable"),
    r,
    c,
    i, j;

// loop through the rows
for (i=0; i<t.rows.length; i++) {
   // get reference to current row
   r = t.rows[i]; //
   // loop through tds of current row
   for (j=0; j<r.cells.length; j++) {
       // get reference to current cell
       c = r.cells[j]; // equivalent to t.rows[i].cells[j]
      // display content of cell
      alert(c.innerHTML);
      // change content of cell
      c.innerHTML = "New value " + i + j;
    }
}

Если вы заранее знаете размер таблицы, вы можете напрямую ссылаться на конкретный тд - учитывая, что индексы начинаются с 0, второй тд третьей строки будет:

var particularTD = t.rows[2].cells[1]; // where t was declared above
alert(particularTD.innerHTML);

Answer 2

Я думаю, вы можете сделать что-то вроде этого:

var table = document.getElementById(tableId); 
var rows = table.getElementsByTagName("tr");  
for(i = 0; i < rows.length; i++){           
    //manipulate rows  
}