我正在动态创建添加和删除行但似乎我的代码无法正常工作请帮助我。因为我试图追加表格行而无法获得警报但在此之前它将检查天气表是否存在而不是添加行
$(document).ready(function()
{
$("#add_Row").click(function()
{
if($(".test").html() == null)
{
alert("empty");
$("#add_Row").click(function()
{
alert("I am here");
$('.test').append(
"<tr><td><input type="text" class="index_txtBox"/></td>
<td><input type="checkbox" class="check_box"/></td>
<td><input type="text" class="txt_Box"/></td>
<td><select><option></option></select></td></tr>
");
});
$("#delete_Row").click(function()
{
if($(".test tr").length != 0)
{
$(".test tr:last-child").remove();
}
else
{
alert("Now table is empty");
}
}
}
});
});
</script>
</head>
<body>
<div class="buttons">
<input type="button" id="add_Row" value="Add Row" />
<input type="button" id="delete_Row" value="Delete Row" />
<input type="checkbox" id="select_All" value="Select All" />Select All
</div>
答案 0 :(得分：2)
这可能有效：
$(document).ready(function()
{
$("#add_Row").on('click',function()
{
alert("I am here");
$('.test').append('<tr><td><input type="text" class="index_txtBox"/></td><td><input type="checkbox" class="check_box"/></td><td><input type="text" class="txt_Box"/></td><td><select><option></option></select></td></tr>');
});
$('#delete_Row').on('click',function()
{
if($(".test tr").length != 0)
{
$(".test tr:last-child").remove();
}
else
{
alert("Now table is empty");
}
});
});
您不需要测试.test是否为空，因为您要添加它并且追加也适用于空元素
答案 1 :(得分：1)
首先，您尝试附加无效字符串。你的字符串不应该在它们之间有断点（你可以使用\来转义它们），而是让你的字符串在一行之内。并使用单引号括起整个字符串，并使用双引号围绕其他HTML属性，或者您可以反过来使用它。
这样的事情：
var text= "<tr><td><input type='text'' class='index_txtBox'/></td>"
+"<td><input type='checkbox' class='check_box'/></td>"
+"<td><input type='text' class='txt_Box'/></td>"
+"<td><select><option></option></select></td></tr>";
现在，对于添加按钮：
$(document).on('click', '#add_row', function(){
$('#test').append(text) //append the var defined
});
然后删除按钮，删除已检查的行：
$(document).on('click', '#del_row', function(){
if(!$.trim($('#test').html()).length){ // If empty, do a alert
alert ("Now table is empty")
}else{
$('#test').children('tr').find('input[type=checkbox]:checked').each(function () { // look for the checked input
$(this).closest('tr').remove(); // remove the entire row closest to it
});
}
});
这是Demo。
答案 2 :(得分：0)
您必须更正以下内容 - 1.为什么要为add_row注册多个click事件处理程序 - 删除一个 2.删除按钮单击处理程序应该在添加行单击处理程序之外 3.追加新行时，使用字符串文字是不正确的。
请按照以下代码
$(document).ready(function()
{
//keep this add_row click handler only and remove other
$("#add_Row").click(function()
{
//for alert if test is empty
if($(".test").html() == null)
{
alert("empty");
}
alert("I am here");
//corrected string literal
$('.test').append(
'<tr><td><input type="text" class="index_txtBox"/></td>
<td><input type="checkbox" class="check_box"/></td>
<td><input type="text" class="txt_Box"/></td>
<td><select><option></option></select></td></tr>
');
});
//delete_row click handler outside add_row
$("#delete_Row").click(function()
{
if($(".test tr").length != 0)
{
$(".test tr:last-child").remove();
}
else
{
alert("Now table is empty");
}
});
});
答案 3 :(得分：0)
使用添加/删除按钮创建动态行和列
<强> HTML
<table id="TblPassenger">
<thead>
<tr>
<th><b>Sr.</b></th>
<th><b>Name</b></th>
<th><b>Age</b></th>
<th><b>Gender</b></th>
<th><b>Berth Preference</b></th>
<th><input type="button" id="AddPass" title="Add new passenger" value="Add" /></th>
</tr>
</thead>
<tbody>
<tr>
<td><b>1</b></td>
<td><input type="text" maxlength="16" placeholder="Name 1" data-case="Upper" id="name_0" class="Textbox_Mid" /> </td>
<td><input type="text" title="Age" placeholder="Age" id="Age_0" maxlength="2" data-id="numerical" class="Textbox_TooShort" /></td>
<td>
<select id="Gender_0" title="Gender" class="ddl">
<option value="M">Male</option>
<option value="F">Female</option>
</select>
</td>
<td>
<select id="BP_0" title="Berth Preference" class="ddl">
<option value=" ">No Preference</option>
<option value="LB">LOWER</option>
<option value="MB">MIDDLE</option>
<option value="UB">UPPER</option>
<option value="SL">SIDE LOWER</option>
<option value="SU">SIDE UPPER</option>
</select>
</td>
<td><input type="button" id="DeletePass_0" title="Delete this passenger" value="Del" /> </td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4"><b>Mobile No. </b><input type="text" id="txtMobileNo" data-msg="Mobile No. should be 10 digit" data-minlength="10" placeholder="Mobile No." title="Enter mobile No. to get SMS" maxlength="10" data-id="numerical" class="Textbox_Mid" /></td>
<td colspan="2"></td>
</tr>
</tfoot>
</table>
<强> Jquery的
function AddPassenger() {
var btnIndex = $('input[id*="DeletePass_"]').length;
if (btnIndex < 4) {
var Sr = btnIndex + 1;
$('#TblPassenger').find('tbody').append('<tr>'
+ '<td>' + Sr + '</td>'
+ '<td><input type="text" data-case="Upper" maxlength="16" placeholder="Name ' + Sr + '" id="name_' + btnIndex + '" class="Textbox_Mid" /> </td>'
+ '<td><input type="text" title="Age" placeholder="Age" id="Age_' + btnIndex + '" data-id="numerical" maxlength="2" class="Textbox_TooShort" /></td>'
+ '<td><select id="Gender_' + btnIndex + '" title="Gender" class="ddl"><option value="M">Male</option><option value="F">Female</option></select></td>'
+ '<td><select id="BP_' + btnIndex + '" title="Beath Preference" class="ddl"><option value=" ">No Preference</option><option value="LB">LOWER</option><option value="MB">MIDDLE</option><option value="UB">UPPER</option><option value="SL">SIDE LOWER</option><option value="SU">SIDE UPPER</option></select></td>'
+ '<td><input type="button" title="Delete this passenger" id="DeletePass_' + btnIndex + '" value="Del" /> </td></tr>');
RowColor();
}
$('input[id*="AddPass"]').click(function () {
AddPassenger();
$('input[id*="DeletePass_"]').on('click', Del);
});
var Del = function (DelBtn) {
var _DeletePass = $('input[id*="DeletePass_"]')
if (_DeletePass.length > 1) {
$(DelBtn.currentTarget).parent().parent().remove();
var Tr = $('#TblPassenger').find('tbody tr');
$.each(Tr, function (i) {
Tr.eq(i).find('td').eq(0).text(i + 1);
var $n = i + 1;
Tr.eq(i).find('td').eq(1).find('input').attr('placeholder', 'Name ' + $n);
});
}
RowColor();
}
function RowColor() {
$('#TblPassenger tbody tr:odd').css('background-color', 'burlywood');
$('#TblPassenger tbody tr:even').css('background-color', 'white');
}
答案 4 :(得分：0)
如果您想在点击add_row按钮时添加新行，并在点击delete_row时删除最后一行，请按照以下代码：
<强> HTML
<table class="test">
<tbody></tbody>
</table>
<div class="buttons">
<input type="button" id="add_Row" value="Add Row" />
<input type="button" id="delete_Row" value="Delete Row" />
<input type="checkbox" id="select_All" value="Select All" />Select All
</div>
<强>的javascript
$(document).ready(function()
{
var $target_area= $(".test").find('tbody');
$("#add_Row").on("click", function(){
var $new_row = '<tr><td><input type="text" class="index_txtBox"/></td><td><input type="checkbox" class="check_box"/></td><td><input type="text" class="txt_Box"/></td><td><select><option></option></select></td></tr>';
$target_area.append($new_row);
});
$("#delete_Row").on('click',function(){
$target_area.find('tr:last').remove();
});
});