Question

我正在使用一个表，我使用javascript从表单发送数据代码是

<div class="row">
    <div class="span*">
        <table id="production" class="table table-bordered" style="margin:10px auto;border:1px solid #999;width:95%">
            <thead>
                <tr>
                    <td scope="col" width="200">Product Name</td>
                </tr>
                <tr>
                    <td scope="col" width="300">Product Quantity</td>
               </tr>
            </thead>
        </table>
    </div>
</div>
</div></div>

<form name="order" id="order">
<table>
    <tr>
         <td>
            <label for="prodname">Product Name:</label>
        </td>
        <td>
           <input id="prodname" name="product name" type="text" />
        </td>
     </tr>
     <tr>
         <td>
          <label for="prodquantity">Product Quanitity:</label>
         </td>
         <td>
           <input id="prodquantity" name="product quantity" type="text" />
         </td>
    </tr>
</table>
<input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset" />
<button type="button" onClick="updateForm();"/>Add</button>
</form>

javascript代码是：

function updateForm() {
   var prdn = document.getElementById("prodname").value;
   var prdq = document.getElementById("prodquantity").value;
   var table=document.getElementById("production");
   var row=table.insertRow(-1);
   var cell1=row.insertCell(0);
   var cell2=row.insertCell(1);
   var cell3=row.insertCell(2);
   cell1.innerHTML=prdn;
   cell2.innerHTML=prdq;                
}

如何检索两行而不是列的两列元素？

Answer 1

你应该使用带有id的选择器并找到表，得到行和每行得到TD，就像这个例子......

http://fiddle.jshell.net/beME9/show/

Answer 2

如果我理解你的问题，你想要在2行而不是2列显示数据。

<table id="production">
    <tr>
        <th>Product Name</th>
    </tr>
    <tr>
        <th>Product Quantity</th>
    </tr>
</table>

function updateForm() {
   var prdn = document.getElementById("prodname").value;
   var prdq = document.getElementById("prodquantity").value;
   var table=document.getElementById("production");
   var rows=table.rows;
   var cell1=rows[0].insertCell(-1);
   var cell2=rows[1].insertCell(-1);
   cell1.innerHTML=prdn;
   cell2.innerHTML=prdq;                
}

如果您可以更改HTML结构。我做的是：

将表格构造为两行，每行中第一个元素作为表格标题。
获取表格的行
为每一行添加一个单元格
设置单元格的内容

这是一个演示：

http://jsfiddle.net/QzcZN/

渲染表数据

2 个答案: