Javascript 呈现表数据

我使用的是一个表，其中我使用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>

---

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

您应该使用带id的选择器找到表，获取行，并按每行获取TD，如本例所示

---

如果我正确理解您的问题，您希望在两行而不是两列上显示数据

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

品名
产品数量
函数updateForm（）{
var prdn=document.getElementById（“prodname”）.value；
var prdq=document.getElementById（“prodquantity”）.value；
var table=document.getElementById（“生产”）；
var rows=table.rows；
var cell1=行[0]。插入单元格（-1）；
var cell2=行[1]。插入单元格（-1）；
cell1.innerHTML=prdn；
cell2.innerHTML=prdq；
}

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

• 将表结构为两行，每行的第一个元素作为表头
• 获取表中的行
• 对于每行，在末尾附加一个单元格
• 设置单元格的内容

下面是一个演示：

---

无法理解。。你可以发布一个JSFIDLE或者解释更多你的问题吗？你如何检索你的问题。。。你到底想要什么？我需要输入后的数据垂直显示在列中（在表中标题的前面），而当前它们显示在第三行（水平），这是我的小提琴…你能举个例子给我看吗，很抱歉我是脚本编写的新手。Andrei thanx为此，它真的帮助我实现了我所需要的。Andrei我再次需要你的帮助，你能帮我理解如何在表格的第二列而不是单元格中插入HTML表单中的产品名称和产品质量吗。我真的不明白这与我之前的回答有什么不同。以下是我的理解：如果这是你现在回答的问题，而不是更好地解释或问其他问题，因为这个问题已经得到了回答：）Andrei根据你在上一个回答中的建议，HTML表单中的数据是增加单元格，而不是插入单独列的值，假设我创建了一个三列三行的表，第一列是标题，第二列是空的，第三列是预定义的，现在我想在第二列中输入值，我再次提出了这个问题，我更新的小提琴是，今天在这里再次提出了这个问题

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