Нужна помощь в преобразовании кодирования Javascript, чтобы использовать мою HTML-таблицу - PullRequest
0 голосов
/ 29 ноября 2011

У меня есть таблица, в которой количество строк зависит от того, какое число находится в счетчике. Это работает, например, если я введу 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>

// кнопка текстовой области и отправки, где вводятся и отправляются вопросы, кнопка текстовой области и отправки находится под таблицей выше

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

Ответы [ 2 ]

0 голосов
/ 29 ноября 2011

Похоже, вы не получаете элемент таблицы.

Изменение

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

до

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

Я думаю, что это должно сделать.

В ответ на ваш вопрос в комментариях: переместить <?php echo $i; ?> в столбец вопроса <td class="question"><?php echo $i; ?></td>

0 голосов
/ 29 ноября 2011

Дайте вашим строкам-заполнителям "пустой" класс ... удалите пробел для каждой добавляемой строки.

...