我必须调用两个按钮单击事件添加和从 jquery 选项卡中删除，我正在使用 jquery 表单
这是我的代码，在 jquery 选项卡内的表格上添加和删除按钮，但是当我调用 click 事件时，它没有调用它。
<div id="tabs-2">
<form id="DSLform">
<table id="table-1" class="add1" border ="1"><!-- DSL -->
<thead>
<tr><td colspan="6" align="center" style="text-shadow: black;"><b>DSL LOCO</b></td></tr>
<tr>
<th class="small">S.No</th>
<th>LOCO NO</th>
<th>SHED</th>
<th class="sizing"> SCHEDULE</th>
<th> PROGARMME </th >
<th><input type="submit" class="add1" value="+"></th>
<!-- <th><button id="butVal1" type="button"> + </button></th> -->
</tr>
</thead>
<tbody>
<tr class="tabRow1" id="1item">
<td class="sno1">1</td>
<td><input type="text" name="loco_no"/> </td>
<td> <input type="text" name="shed"/> </td>
<td> <input type="text" name="schedule"/> </td>
<td><input type="text" name="programme"/> </td>
<td><button class="remove1">Remove</button></td>
</tr>
</tbody>
</table>
and my javascript file is
(document).ready( function() {
$("#butVal1").click(function(){
var rowLen = $('tr.tabRow1').length;
if(rowLen>9)
{
alert("no of row is reached 10");
}
else
{
$("tr.tabRow1:first").clone(true).appendTo("#table-1>tbody");
$(".tabRow1:last").children("td").children("input").each(function(index, element)
{
$(element).val("");
});
}
});
$("tabs-1").on("click", "button.remove1", function(){
if($(this).parents("tr").siblings("tr.tabRow1").length > 0)
{
$(this).closest("tr.tabRow1").remove();
}
else
{
alert("you can't remove this record");
}
});
$("#tabs-1").on("click", ".add1, .remove1", function(){
$("td.sno1").each(function(index,element){
$(element).text(index + 1);
});
});
});
我在上面添加了我的代码，我需要这个添加和提交按钮在 jquery 选项卡中工作，这些文本框值也需要保存为记录，当我从表中添加或删除行时如何识别每一行
蝴蝶刀刀1回答
-
慕桂英546537
在下面的代码中，我使用.length获取行的长度和added 1显示S.no计数，因为计数从1. 然后，我没有循环遍历所有输入，而是用来.find("input").val("")清空所有输入值，然后最后仅用于appendTo附加tr特定表。然后，当用户单击remove按钮时，我得到了表的 id，它在所有表中都是唯一的tabs，然后我将这个值传递给函数，以便在删除任何行后resetValues重置列计数。S.no所以，使用表id我已经循环tbody tr并重置了计数。演示代码：$(document).ready(function() { $(function() { $("#tabs").tabs(); }); //click on add $(".add").click(function() { var apendTo = $(this).closest("table").find("tbody") //get length of trs var rowLen = $(this).closest("table").find("tbody tr").length + 1; if (rowLen > 9) { alert("no of row is reached 10"); } else { //get cloned of tr var cloned = $(this).closest("table").find("tbody tr:first").clone(true); //set s.no cloned.find("td:eq(0)").text(rowLen); cloned.find("input").val(""); //empty inputs cloned.appendTo(apendTo) //appends } }); $(document).on("click", "button.remove1", function() { var table_id = $(this).closest("table").attr("id") //get tablename if ($(this).parents("tr").siblings("tr.tabRow1").length > 0) { $(this).closest("tr.tabRow1").remove(); resetValues(table_id); //call to reset values } else { alert("you can't remove this record"); } }); function resetValues(el) { var counter = 2; //initialze to 2 because 1 is fixed //looping through tr not first one $("#" + el).find("tbody tr:not(:first)").each(function() { //find .sno1 class replace its counter $(this).find('.sno1').text(counter); counter++; }) }});<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><script src="https://code.jquery.com/jquery-1.12.4.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script><div id="tabs"> <ul> <li><a href="#tabs-1">FIRST</a></li> <li><a href="#tabs-2">SECOND</a></li> </ul> <div id="tabs-1"> <form id="DSLform"> <table id="table-1" class="add1" border="1"> <!-- DSL --> <thead> <tr> <td colspan="6" align="center" style="text-shadow: black;"><b>DSL LOCO</b></td> </tr> <tr> <th class="small">S.No</th> <th>LOCO NO</th> <th>SHED</th> <th class="sizing"> SCHEDULE</th> <th> PROGARMME </th> <th><input type="button" class="add" value="+"></th> </tr> </thead> <tbody> <tr class="tabRow1" id="1item"> <td class="sno1">1</td> <td><input type="text" name="loco_no" /> </td> <td> <input type="text" name="shed" /> </td> <td> <input type="text" name="schedule" /> </td> <td><input type="text" name="programme" /> </td> <td><button type="button" class="remove1">Remove</button></td> </tr> </tbody> </table> </form> </div> <div id="tabs-2"> <form id="DSLform"> <table id="table-2" class="add1" border="1"> <!-- DSL --> <thead> <tr> <td colspan="6" align="center" style="text-shadow: black;"><b>DSL LOCO</b></td> </tr> <tr> <th class="small">S.No</th> <th>LOCO NO</th> <th>SHED</th> <th class="sizing"> SCHEDULE</th> <th> PROGARMME </th> <th><input type="button" class="add" value="+"></th> </tr> </thead> <tbody> <tr class="tabRow1" id="1item"> <td class="sno1">1</td> <td><input type="text" name="loco_no" /> </td> <td> <input type="text" name="shed" /> </td> <td> <input type="text" name="schedule" /> </td> <td><input type="text" name="programme" /> </td> <td><button type="button" class="remove1">Remove</button></td> </tr> </tbody> </table> </form> </div></div>注意：以上代码适用于任何表格，您只需要确保id对所有表格都是唯一的。
随时随地看视频慕课网APP
相关分类
JavaScript