Question

这就是我想知道的。我有一个表，其行数取决于微调器中的数字。这确实有效，例如如果我在微调器中输入25，它会出现25行，如果我在微调器中输入7则有7行。

所以我的问题是：

让我们说表中有很多行。我所拥有的是textarea，用户输入他们的问题，然后提交问题，问题应该插入并出现在“问题”列下的表格的第一行，textarea变为空白，用户输入他的第二个问题，如果用户提交了这个，那么问题将出现在第二行，第三个问题进入第三行，第四个问题进入第四行等等。

问题在于，每当我向表格提交问题时，它都会创建一个新行。因此，如果我在表中有20个空行，因为我在微调器中说我想要20个问题，那么每次我提交一个问题时会发生什么，每次都会添加一个新行，所以从textarea提交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>

我所说的是有一张空白的表格，下面的表格是一个textarea和一个提交按钮，老师输入一个问题，当老师提交问题时，它会进入表格的第一行，因为这是第一个问题，然后老师重复，第二个问题排在第2行，依此类推。但是，不是将数据插入到表中已有的行中，而是创建新行并将数据插入新行。

Answer 1

我想你可能想做这样的事情：

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

Answer 2

给定现有表格：

<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;
    }
}

如果您提前知道表的大小，可以直接引用特定的td - 注意索引从0开始，第三行的第二个td将是：

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

我该如何检索元素

2 个答案: