通过在中使用JavaScript添加新行<div>

Question

I want to add new row when the button is clicked. Below is my code.

<div class="table">
<div id="rows" class="row">

<div id="col1" class="p2">
  <asp:CheckBox id="checkbox1" runat="server" Text="" TextAlign="Right" />
</div>

<div id="col2" class="p3">&nbsp;</div>
<div id="col3" class="p4">
  <asp:TextBox ID="TextBox2" runat="server" Text="2.00"/>
</div>

<div id="col4"class="p5">&nbsp;</div>
<div id="col5" class="p6">
  <asp:TextBox ID="TextBox3" runat="server" Text="1.00"/>
</div>

<div class="row2" style="text-align:center;">
  <button class="clsButton" id="addrow">Add Row</button>
</div>
</div>

below is my jQuery code:

 var cloneCount = 1;

    //add new row
    $("#addrow").click(function () {
        $('#rows')
        .clone(true)
        .attr('id', 'rows' + cloneCount++, 'class', 'row')
       .insertAfter('[id^=rows]:last');
        return false;
    });

The button does not seems to be working. Which part was wrong? I'm really new in JavaScript. Im using VisualStudio 2012, in .aspx form and C# language. Thanks for helping!

Answer 1

function AddRow() {
    var row = document.getElementById("row1");
    var row1 = row.cloneNode(true);
    var box = document.getElementById("table");
    box.appendChild(row1);
}

This is the answer you need I think. But it's not the good practice as you'll be duplicating the IDs here. Use class instead of id .

Answer 2

I changed from JavaScript to jQuery. And the problem were solved. Thanks for helping. below is my answer.

 <script type="text/javascript">
    var cloneCount = 1;

    //add new row
    $("#addrow").click(function () {
        $('#row')
        .clone(true)
        .attr('id', 'row' + cloneCount++, 'class', 'row')
       .insertAfter('[id^=row]:last');
        return false;
    });
</script>