簡體   English   中英

需要有關Javascript編碼轉換以使用我的html表的幫助

[英]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.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM