显示额外表单字段的JavaScript

我有一个表单，它有一个名为“Product”的块，包含文本输入。在该块中，用户可以按“add item”并让JS显示更多字段。到目前为止一切正常

我尝试添加一个函数来添加一个新的“产品”块，但没有成功。你有什么提示给我吗

Product
Item: <input> Price: <input>
Item: <input> Price: <input>
              <a>add item</a>  <- this works

<a>add Product</a>             <- this is the part that I can't figure out :(

产品
项目：价格：
项目：价格：
添加项目是否可以创建一个表格并添加新行

HTML:

我想这应该行得通…
哎呀，我想我误解了这个问题：好吧，你可能无论如何都可以从中解决一些问题…请不要像这样编写HTML-
table
S的表单不好。正确的标记应包含列表<代码>输入

s必须具有

类型

属性，并且应尽可能避免内联事件。

<script type="text/javascript">
    $(document).ready(function(){
    var counter = 2;
    $("b.add-item").click(function () {
    if(counter>5){ alert("Max 6 items allowed"); return false; }   
    var newTextBoxDiv = $(document.createElement('div'))
         .attr("id", 'TextBoxDiv' + counter);
    newTextBoxDiv.after().html(
          '<span class="item">' +
          '<label>Item:</label>'+
          '<input type="text" name="item1[]" id="textbox' + counter + '" value="" >' +
          '<label>&nbsp;&nbsp;&nbsp;Price:</label>'+
          '<input type="text" name="price1[]" id="textbox' + counter + '" value="" >' +       
          '</span>'
           );
    newTextBoxDiv.appendTo(".items");
    counter++;
     });
    $("b.remove-item").click(function () {
    if(counter==1){alert("No more textbox to remove");
    return false; }     counter--;
    $("#TextBoxDiv" + counter).remove();});
    $("#getButtonValue").click(function () { var msg = '';  for(i=1; i<counter; i++){ msg += "\n Textbox #" + i + " : " + $('#textbox' + i).val();  }alert(msg);   });
  });
</script>

<table id="myTable">
  <tr>
    <th>Item</th>
    <td><input /></td>
    <th>Price</th>
    <td><input /></td>
  </tr>
  <tr>
    <th>Item</th>
    <td><input /></td>
    <th>Price</th>
    <td><input /></td>
  </tr>
</table>
<a onclick="add_row(); return false;">Add Product</a>

function add_row()
{
  var table = document.getElementById('myTable');
  if(!table) return;
  // Table row
  var row   = document.createElement('row');
  table.appendChild(row);
  // "Item:"
  var th1 = document.createElement('th');
  th1.innerText = 'Item:'
  row.appendChild(th1);
  // Item input
  var td1 = document.createElement('td');
  row.appendChild(td1);
  var input1 = document.createElement('input');
  td1.appendChild(input1);
  // "Price:"
  var th2 = document.createElement('th');
  th2.innerText = 'Price:'
  row.appendChild(th2);
  // Price input
  var td2 = document.createElement('td');
  row.appendChild(td2);
  var input2 = document.createElement('input');
  td1.appendChild(input2);
}