Уметь вставлять текст из текстовой области в таблицу

Question

Это то, что я хочу знать. У меня есть таблица, в которой количество строк зависит от того, какое число находится в счетчике. Это работает, например, Если я введу 25 в счетчик, то получится 25 рядов, если я введу 7 в счетчик, получится 7 рядов.

Итак, моя проблема заключается в следующем:

Допустим, в таблице есть количество строк. У меня есть текстовое поле, в которое пользователь вводит свой вопрос, а затем отправляет вопрос, вопрос должен быть вставлен и отображен в первой строке таблицы в столбце «Вопрос», текстовое поле становится пустым, а пользователь вводит в него свой вопрос. второй вопрос, если пользователь отправит это, тогда вопрос появится во втором ряду, 3-й вопрос в 3-м ряду, 4-й вопрос в 4-м ряду и т. д.

Проблема в том, что я не знаю, как это сделать. Может кто-нибудь, пожалуйста, сможет показать мне, как этого добиться. Я не сильный программист Javascript, я скорее программист Oracle и MYSQL, но мне нужно использовать Javascript для моего проекта.

Любая помощь будет принята с благодарностью

Ниже мой код Javascript:

              <script type="text/javascript">

function insertQuestion() {   

            var qandatable =  document.getElementById("qandatbl"); 
            var questionDiv = document.getElementById("question");
            var getQuestion = document.getElementById("questionTextarea");     

            var rowCount = qandatable.rows.length;
        var row = qandatable.insertRow(rowCount);

        var questionCell = row.insertCell(getQuestion);

            questionCell.innerHTML = getQuestion.value; 
            }

              </script>

Ниже приведен HTML-код:

//table where questions would be stored

    <table id="qandatbl" align="center">
    <thead>
    <tr>
    <th><span id="qidhead">Question No</span></th>
    <th><span id="questionhead">Question</span></th>
    </tr>
    </thead>
    <tbody>
    <?php
    $spinnerCount = $_POST['textQuestion'];
if($spinnerCount > 0) {
   for($i = 1; $i <= $spinnerCount; $i++) {?>

    <tr>
    <td id="qid"><?php echo $i; ?></td>
    <td id="question"></td>
    </tr>
    </tbody>
    <?php
}
}
?>
</table>

//table which consists of textarea and submit button

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

Answer 1

Сначала вам нужно будет создать элементы строк и ячеек, прежде чем вы сможете добавить их в таблицу.

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 rowCount = tableBody.rows.length;
var enumeratorContent = document.createTextNode(rowCount);
enumeratorCell.appendChild(enumeratorContent);
var questionText = textarea.value;
var questionContent = document.createTextNode(questionText);
questionCell.appendChild(questionContent);

Ваш HTML должен выглядеть так:

<table id="qandatbl" align="center">
    <thead>
        <tr>
            <th id="qidhead">Question No</th>
            <th id="questionhead">Question</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>
         </tr>
<?php
        }
    }
?>
    </tbody>
</table>
<!-- table which consists of textarea and submit button -->
<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="questionNum">Question No </td>
        </tr>
        <tr>
            <td id="questionContent">Question:</td> 
            <td id="questionTextareaCell"><textarea id="questionTxt" rows="5" cols="40" 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>

Вы не должны использовать идентификаторы для создаваемых ячеек более одного раза, потому что идентификатор должен быть уникальным для каждого документа.

Answer 2

Попробуйте это для последней строки:

questionCell.innerHTML = getQuestion.value;