需要有关 Javascript 编码转换以使用我的 html 表的帮助

发布于 2024-12-18 13:50:26 字数 3821 浏览 0 评论 0原文

我有一个表,其行数取决于微调器中的数字。这确实有效,例如,如果我在微调器中输入 25,则会出现 25 行,如果我在微调器中输入 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>

//textarea 和提交按钮,其中输入和提交问题,文本区域和提交按钮位于上表下方

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

I have a table which has the number of rows depended on what the number is in the spinner. This does work e.g If I enter 25 in spinner it comes up with 25 rows, if I enter 7 in spinner comes with 7 rows.This is retrieved through the $spinnerCount.

The problem is that everytime I submit a question (using a textarea and submit buttom to enter and submit a question) into the table, it creates a new row. So if I had 20 empty rows in the table because I stated in the spinner I wanted 20 questions, then what happens is every time I submit a question, it adds a new row every time, so submitting 20 questions from the textarea would mean the table would contain 20 blank rows and 20 rows with questions. I am guessing it is because of this for example:

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

So except creating an element to create a new row, I wanted to retrieve an element so that it submits the question in an existing row (each row contains a text box so question would go into the text box in the row) starting from top row and going down one row every time a question is submitted, rather than creating a new row everytime a question is submitted. The questions would go under the "Questions" column.

Now somebody (user: nnnnn) posted this to me:

Below is an example of a table the user coded himself:

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

Below is user's 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;
    }
}

The problem is that I have tried to manipulate this into my code but #i could not get it to work. Reason for this is because I don't know to use this javascript for my table. so what I wanted to know is can somebody manipulate this javascript code so that it matches with my table?

Below is code for my table and the textarea where the questions will be entered and submitted:

//My table

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

//textarea and submit button where questions are typed in and submitted, the textarea and submit button is placed below the table above

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

寄居者 2024-12-25 13:50:26

为占位符行指定“空白”类...为添加的每一行删除空白。

Give your placeholder rows a "blank" class... remove a blank for each row you add.

美人骨 2024-12-25 13:50:26

看起来你没有得到你的表格元素。

更改

var t = document.getElementById("myTable"),

var t = document.getElementById("qandatbl"),

我认为应该这样做。

针对您在评论中提出的问题:
移动 进入问题栏

Looks like your not getting your table element.

Change

var t = document.getElementById("myTable"),

to

var t = document.getElementById("qandatbl"),

I think that should do it.

In response to your question in the comments:
move <?php echo $i; ?> into the question column <td class="question"><?php echo $i; ?></td>

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文