这就是我想知道的。我有一个表,其行数取决于微调器中的数字。这确实有效,例如如果我在微调器中输入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行,依此类推。但是,不是将数据插入到表中已有的行中,而是创建新行并将数据插入新行。
答案 0 :(得分:0)
我想你可能想做这样的事情:
var table = document.getElementById(tableId);
var rows = table.getElementsByTagName("tr");
for(i = 0; i < rows.length; i++){
//manipulate rows
}
答案 1 :(得分:0)
给定现有表格:
<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);