想要在按钮点击时使用jquery添加表格行

Question

我正在尝试使用jquery中的代码，当用户单击“添加”按钮时调用该代码。该函数应该取行的索引值，并在表的末尾添加一些输入元素的新行。这是我尝试过的东西，但我无处可去。

/* This is the jquery */
$("#add").click(function() {
    var fieldWrapper = NULL;
    var no_checkbox = $('<input type="checkbox" class="css-checkbox" id="checkbox[$index]"/><label for="checkbox[$index]" name="checkbox_lbl" class="css-label lite-x-red"></label>');
    no_checkbox.wrap('<td></td>');
    var q = $('<textarea name="question[]" id="bigarea" style="text-align:left;">');
    q.wrap('<td></td>');
    var yes_checkbox = $('<input name="qchecked[]" type="checkbox" class="css-checkbox" id="checkbox[$index]"/><label for="checkbox[$index]" class="css-label lite-y-green"></label>');
    yes_checkbox.wrap('<td></td>');


    var percentdropdown = '<select style="width:50px; height:25px;" />';
    for (var j = 0; j < 101; j += 5) {
        percentdropdown.append('<option name="effectiveness" value="j">j</option>');
    }

    var comment_box = '<textarea id="smallarea" placeholder="comments" name="comments[]"></textarea>';
    comment_box.wrap('<td></td>');

    fieldWrapper.append(no_checkbox);
    fieldWrapper.append(q);
    fieldWrapper.append(yes_checkbox);
    fieldWrapper.append(percentdropdown);
    fieldWrapper.append(comment_box);
    fieldWrapper.wrap('<tr></tr>');
    $("#checklist").append(fieldWrapper);
});
/* Here is the code on the button */
echo "<div class=savebtn align=center >";
echo "<input style='margin-bottom: 5px;margin-right:20px;' type='button' value='Add New Question' id='add'>";
echo "<input style='margin-bottom: 5px;' type='submit' value='Save' name='chklst_save'>";
echo "</div>";

这就是我想要添加行的方式。请帮忙。

Answer 1

<table style="width:100%" id="addtablerow">
<th>First Checkbox</th>
<th>First Textarea</th> 
<th>Second Checkbox</th>
<th>Second Textarea</th>
<tr>
<td align="center"><input type="checkbox" value="1" name="first" /></td>
<td align="center"><textarea col="2" row="3" name="fisrttextarea"></textarea></td>
<td align="center"><input type="checkbox" value="1" name="second" /></td>
<td align="center"><textarea col="2" row="3" name="secondtextarea"></textarea></td>
</tr>
</table>
<button id="addnewrow">Add New Row</button>
<button>Save</button>
$(document).ready(function(){
window.uniqnumber = 1;
$("#addnewrow").click(function(){
var adduniq=uniqnumber++;           
add_responddiv(adduniq).appendTo("#addtablerow");
});
function add_responddiv(number)
{
    var uniqeid = Math.floor((Math.random() * 100) + 1);;
    var a ='<input type="checkbox" value="1" name="first'+number+'" />';
    var b='<textarea col="2" row="3" name="fisrttextarea'+number+'"></textarea>';
    var c='<input type="checkbox" value="1" name="second'+number+'" />';
    var d='<textarea col="2" row="3" name="secondtextarea'+number+'"></textarea>';              
    var n=$('<tr><td align="center">'+a+'</td><td align="center">'+b+'</td><td align="center">'+c+'</td><td align="center">'+d+'</td></tr>');
    return n 
    }
  });

Answer 2

<table class="table">
  <thead>
    <tr>
      <th>Checkbox</th>
      <th>Textarea</th> 
    </tr>
</thead> 
 <tbody id="tableBody">
  <tr id="row1">
        <input type="hidden" id="rowid" value="1">
         <td align="center"><input type="checkbox" value="1" name="chk1" /></td>
        <td align="center"><textarea col="2" row="3" name="text1"></textarea></td>
  </tr>
</tbody>

 <button id="addnewrow">Add New Row</button>
  <button>Save</button>

$("#addnewrow").click(function(){
    var rowid=$("#rowid").val();
    var text=$("#text"+rowid).val();
    rowid=parseFloat(rowid)+1;
            $("#rowid").val(rowid);
    var data='<tr id="row'+rowid+'">';
     data +='<input type="hidden" id="rowid" value="'+rowid+'">';
             data +='<td align="center"><input type="checkbox" value="1" name="chk'+rowid+'" /></td>';
     data +='<td align="center"><textarea col="2" row="3" name="text'+rowid+'"></textarea></td>';
            data +='</tr>';
      $("#tableBody").append(data);
});