Хотите добавить строку таблицы, используя jquery по нажатию кнопки
Я пытаюсь написать код в jquery, который называется call, когда пользователь нажимает кнопку Add. функция должна принять значение индекса строки и добавить новую строку с некоторыми входными элементами в конце таблицы. Вот кое-что, что я попробовал, но я иду в никуда.
/* 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>";
Вот как я хочу добавить строку. Пожалуйста помоги.
Решение
<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
}
});
Другие решения
<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);
});