我该如何检索元素

时间:2011-11-28 11:15:30

标签: javascript html function html-table

这就是我想知道的。我有一个表,其行数取决于微调器中的数字。这确实有效,例如如果我在微调器中输入25,它会出现25行,如果我在微调器中输入7则有7行。

所以我的问题是:

让我们说表中有很多行。我所拥有的是textarea,用户输入他们的问题,然后提交问题,问题应该插入并出现在“问题”列下的表格的第一行,textarea变为空白,用户输入他的第二个问题,如果用户提交了这个,那么问题将出现在第二行,第三个问题进入第三行,第四个问题进入第四行等等。

问题在于,每当我向表格提交问题时,它都会创建一个新行。因此,如果我在表中有20个空行,因为我在微调器中说我想要20个问题,那么每次我提交一个问题时会发生什么,每次都会添加一个新行,所以从textarea提交20个问题就意味着表格会包含20个空行和20行问题。我猜这是因为这个例子:

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

所以我想知道的是除了创建一个元素以创建一个新行之外,我如何检索一个元素,以便它从上到下在现有行中提交问题,而不是每次问题都创建一个新行提交了?

Below is my code:

function insertQuestion() {   
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 questionText = textarea.value;
var questionContent = document.createTextNode(questionText);
questionCell.appendChild(questionContent);

            }

HTML:

// table where questions will be inserted into

     <table>

    <?php
    $spinnerCount = $_POST['textQuestion'];
if($spinnerCount > 0) {
   for($i = 1; $i <= $spinnerCount; $i++) {?> // this get the number of questions from the spinner

        <tr>
            <td class="qid"><?php echo $i; ?></td>
            <td class="question"></td>
        </tr>

    </table>


//Text Area and submit button to submit questions

<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 class='trheight'>
</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>

我所说的是有一张空白的表格,下面的表格是一个textarea和一个提交按钮,老师输入一个问题,当老师提交问题时,它会进入表格的第一行,因为这是第一个问题,然后老师重复,第二个问题排在第2行,依此类推。但是,不是将数据插入到表中已有的行中,而是创建新行并将数据插入新行。

2 个答案:

答案 0 :(得分:0)

我想你可能想做这样的事情:

var table = document.getElementById(tableId); 
var rows = table.getElementsByTagName("tr");  
for(i = 0; i < rows.length; i++){           
    //manipulate rows  
}

答案 1 :(得分:0)

给定现有表格:

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

如果要检索或更改现有单元格的内容,可以执行以下操作:

// 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;
    }
}

如果您提前知道表的大小,可以直接引用特定的td - 注意索引从0开始,第三行的第二个td将是:

var particularTD = t.rows[2].cells[1]; // where t was declared above
alert(particularTD.innerHTML);