Хотите добавить строку таблицы с помощью 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); 
});