[英]Need help on Javascript coding converting to use my html table
我有一个表,其中的行数取决于微调器中的行数。 这确实有效,例如,如果我在Spinner中输入25,它将显示25行,如果我在Spinner中输入7,则显示7行。这是通过$spinnerCount
检索的。
问题是,每次我向表中提交问题(使用文本区域和提交按钮输入并提交问题)时,都会创建一个新行。 因此,如果在表中有20个空行,因为我在微调器中表示要20个问题,那么发生的事情是每次我提交一个问题时,每次都会添加一个新行,因此从文本区域提交20个问题就意味着表将包含20个空白行和20个带问题的行。 我猜是因为这个原因:
var enumeratorCell = document.createElement("td");
因此,除了创建一个元素以创建新行之外,我想检索一个元素,以便它在现有行中提交问题(每行包含一个文本框,因此问题将进入该行的文本框中),从第一行开始并在每次提交问题时都向下一行,而不是在每次提交问题时都创建新行。 这些问题将在“问题”列下。
现在有人(用户:nnnnn)将其发布给我:
下面是用户自己编写的表的示例:
<table id="myTable">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
以下是用户的JavaScript:
//If you want to retrieve or change the contents of the existing cells you can do this:
// 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;
}
}
问题是我试图将其处理到我的代码中,但是#i无法使它正常工作。 这样做的原因是因为我不知道在表中使用此javascript。 所以我想知道的是,有人可以操纵此javascript代码,使其与我的表匹配吗?
以下是我的表格和将要输入和提交问题的文本区域的代码:
//我的桌子
<table id="qandatbl" align="center">
<thead>
<tr>
<th><span id="qidhead">Question No</span></th>
<th><span id="questionhead">Question</span></th>
<th><span id="optionshead">Option Type</span></th>
<th><span id="durationhead">Duration</span></th>
<th><span id="weighthead">Weight(%)</span></th>
<th><span id="answerhead">Answer</span></th>
<th><span id="videohead">Video</span></th>
<th><span id="audiohead">Audio</span></th>
<th><span id="imagehead">Image</span></th>
</tr>
</thead>
<tbody>
<?php
$spinnerCount = $_POST['textQuestion'];
if($spinnerCount > 0) {
for($i = 1; $i <= $spinnerCount; $i++) {?>
<tr>
<td class="qid"><?php echo $i; ?></td>
<td class="question"></td>
<td class="options"></td>
<td class="duration"></td>
<td class="weight"></td>
<td class="answer"></td>
<td class="video"></td>
<td class="audio"></td>
<td class="image"></td>
</tr>
</tbody>
<?php
}
}
?>
</table>
//输入和提交问题的文本区域和提交按钮,文本区域和提交按钮位于上表下方
<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>
<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>
给占位符行添加一个“空白”类...为添加的每一行删除一个空白。
看起来您没有得到表格元素。
更改
var t = document.getElementById("myTable"),
至
var t = document.getElementById("qandatbl"),
我认为应该这样做。
在评论中回答您的问题:move <?php echo $i; ?>
<?php echo $i; ?>
进入问题列<td class="question"><?php echo $i; ?></td>
<td class="question"><?php echo $i; ?></td>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.