[英]Be able to insert text from a textarea into a table
這就是我想知道的。 我有一個表,其中的行數取決於微調器中的行數。 這確實有效,例如,如果我在微調器中輸入25,則顯示25行,如果我在微調器中輸入7,則顯示7行。
所以我的問題是這樣的:
假設一個表格中有許多行。 我所擁有的是一個文本區域,用戶在其中輸入問題,然后提交問題,該問題應插入並出現在表格的“問題”列下的第一行中,文本區域為空白,用戶輸入第二個問題,如果用戶提交此問題,則該問題將出現在第二行,第三個問題進入第三行,第四個問題出現在第四行等。
問題是我不知道該怎么做。 有人可以告訴我如何實現這一目標。 我不是一個強大的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>
嘗試此作為最后一行:
questionCell.innerHTML = getQuestion.value;
首先,您必須先創建行和單元格元素,然后才能將它們添加到表中。
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>
您不應將ID多次用於生成的單元格,因為ID在每個文檔中都應該是唯一的。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.