Question

我有一个包含名为“Product”的块的表单，其中包含文本输入。在该块中，用户可以按“添加项目”并让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 :(

任何帮助将不胜感激。

谢谢！

更新：这是项目和价格字段的JS：

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

Answer 1

也许制作一张桌子并添加新行？

HTML：

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

JavaScript的：

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

我认为这应该有用......

用于显示额外表单字段的JavaScript

1 个答案: