Cod*_*joy 5 javascript jquery html5
当按下加号时,我的代码会向表中添加一行,并将其添加到正确的引用中,因此当我提交表单数据时,我知道哪些数据是什么.减去我有点困难让它在删除刚刚添加的行或之前从表中添加的另一行.
我想也许是我的.bind在addRow函数的最后一行,因为我在这里看到它可能应该是一个.on？
无论哪种情况,我的代码都在这里:
<script language='javascript' type='text/javascript'>
$(document).ready(function () {
function addRow() {
var $myTable = $("#myTable").find('tbody');
var parent = $(this).parent("td").parent("tr").attr("id");
var newRowID = $myTable.children("tr").length + 1;
var $newRow = $("<tr id='regFacEmpType" + newRowID + "' data-parent-row='" + parent + "'>");
$newRow.append($("<td align='center'>611000</td>"));
$newRow.append($("<td class='style1'><input type='text' name='RegEmpType" + newRowID + "' size='15' data-emp-type='Regular' /></td>"));
//see the data-emp-type not sure how else to know what is coming back unless name is going to be dynamically generated here using a counter. Should
//only be one type of each field, so instead of EmpType being generic: EmpTypeRegular1 and if they add another employee then EmpTypeRegular2 etc.
$newRow.append($("<td><input type='checkbox' name='RegEmpIDC" + newRowID + "' value='true' /></td>"));
$newRow.append($("<td align='center' id='RegEmpAgencyBudgt" + newRowID + "'>$43,0000</td>"));
$newRow.append($("<td align='center' id='RegEmpRowBdgt" + newRowID + "'>$3,0000</td>"));
$newRow.append($("<td class='style1' id='RegEmpRowAdjBudget" + newRowID + "'><input type='text' name='AdjustedBudgetRegularEmpType" + newRowID + "' /></td>"));
$newRow.append($("<td class='style1' id='RegEmpRowComments" + newRowID + "'><input type='text' name='RegEmpComments" + newRowID + "' /></td>"));
$newRow.append($("<td></td>").append($("<button class='addRegular' type='button'>+</button>").bind("click", addRow))); //make it where any plus subsequently added will add a row
$newRow.append($("<td></td>").append($("<button class='removeRegular' id='removeRegular" + newRowID +"' type='button'>-</button>").bind("click", removeRegularRow(newRowID))));
$myTable.append($newRow);
};
//for some reason this is called everytime I click the PLUS also it does nothing?
function removeRegularRow(index) {
$("#regFacEmpType" + index).remove();
};
$(".addRegular").on("click", addRow); //make it so the default row adds a new one.
});
</script>
</head>
<body>
<FORM action="" method="post">
<table id='myTable'>
<tbody>
<tr id="FacultyEmployees">
<th align="center" class="style1">Index Number</th>
<th align="center" class="style1">Faculty Type</th>
<th align="center" class="style1">IDC</th>
<th align="center" class="style1">Agency Budgeted Amount</th>
<th align="center" class="style1">PI Budgeted Amount</th>
<th align="center" class="style1">PI Adjusted Budget</th>
<th align="center" class="style1">Comments</th>
</tr>
<tr id="regFacEmpType1" data-child-type='regExemptEmpType1' data-parent-type='regFacEmpType1'>
<!-- next row would be regExemptEmpType1 etc -->
<td align="center">611000</td>
<td align="center">Regular</td>
<td><input type="checkbox" name="IDC" value="true" /></td>
<td align="center" id="agencyBudgeted1">$43,0000</td>
<td align="center" id="piBudgetedAmount1">$33,0000</td>
<td id="piAdjustedBudget1"><input type="text" name="PI Adjusted Budget" width="5" /></td>
<td class="style1"><input type="text" name="Comments" id="comments1" size="15" /></td>
<td><button type='button' class="addRegular">+</button></td>
</tr>
</tbody>
</table>
<button type="submit"/> Submit </button>
</FORM>
关于您的 JavaScript 代码：
bind()功能；removeRegularRow()功能；在里面添加以下on('click'..事件$(document).ready：
$("#myTable").on('click', '.removeRegular', function(){
$(this).parent().parent().remove();
// It's faster with: $(this).closest('tr').remove();
});
问题是这行元素是动态插入的，并且只有在 DOM 加载所有内容并准备好之后才插入。简单地说，您的算法不会在所有内容都已加载的情况下找到插入的所需 HTML。
有了$('.some_parent_element').on('click', '.element_desired', function(){...});它，您就可以绕过这个问题并对该元素做任何您想做的事情。也就是说，我们坚持老少皆宜的理念，好吗？：P
你提到的答案有一个非常好的和简洁的解释。尝试理解这个答案，因为您需要了解未来的编码。
closest好吧，我们在这里有一个很好的答案，解释了“为什么”，所以我将链接到它。但是，总而言之，它围绕搜索整个文档或文档的特定区域进行。还有一些库层需要处理才能最终到达您想要的位置。作为附录，请检查此性能测试。
文档说：
parent()获取当前匹配元素集中每个元素的父元素，可以选择通过选择器进行过滤。
closest()对于集合中的每个元素，通过测试元素本身并在 DOM 树中向上遍历其祖先来获取与选择器匹配的第一个元素。
有一些方法可以比依赖“本机”Java 脚本更快地完成此parent()操作closest()。但你应该始终考虑可读性以及老板和客户的固执......
还要考虑您的应用程序的目标受众。当然，可扩展性很重要，但即使某些东西比其他东西慢，如果您的应用程序不大或没有大量数据需要处理，那么您使用什么并不重要。只要确保正确使用它并不断地在需要时进行更改即可。
您可以验证经过更改的代码现在是否可以正常工作。只需单击下面的“运行代码片段”按钮即可。
$("#myTable").on('click', '.removeRegular', function(){
$(this).parent().parent().remove();
// It's faster with: $(this).closest('tr').remove();
});
$(document).ready(function () {
var index;
function addRow() {
var $myTable = $("#myTable").find('tbody');
var parent = $(this).parent("td").parent("tr").attr("id");
var newRowID = $myTable.children("tr").length + 1;
index = newRowID;
var $newRow = $("<tr id='regFacEmpType" + newRowID + "' data-parent-row='" + parent + "'>");
$newRow.append($("<td align='center'>611000</td>"));
$newRow.append($("<td class='style1'><input type='text' name='RegEmpType" + newRowID + "' size='15' data-emp-type='Regular' /></td>"));
//see the data-emp-type not sure how else to know what is coming back unless name is going to be dynamically generated here using a counter. Should
//only be one type of each field, so instead of EmpType being generic: EmpTypeRegular1 and if they add another employee then EmpTypeRegular2 etc.
$newRow.append($("<td><input type='checkbox' name='RegEmpIDC" + newRowID + "' value='true' /></td>"));
$newRow.append($("<td align='center' id='RegEmpAgencyBudgt" + newRowID + "'>$43,0000</td>"));
$newRow.append($("<td align='center' id='RegEmpRowBdgt" + newRowID + "'>$3,0000</td>"));
$newRow.append($("<td class='style1' id='RegEmpRowAdjBudget" + newRowID + "'><input type='text' name='AdjustedBudgetRegularEmpType" + newRowID + "' /></td>"));
$newRow.append($("<td class='style1' id='RegEmpRowComments" + newRowID + "'><input type='text' name='RegEmpComments" + newRowID + "' /></td>"));
$newRow.append($("<td></td>").append($("<button class='addRegular' type='button'>+</button>").bind("click", addRow))); //make it where any plus subsequently added will add a row
$newRow.append($("<td></td>").append($("<button class='removeRegular' id='removeRegular" + newRowID +"' type='button'>-</button>")));
$myTable.append($newRow);
};
$("#myTable").on('click', '.removeRegular', function(){
$(this).parent().parent().remove();
});
$(".addRegular").on("click", addRow); //make it so the default row adds a new one.
});| 归档时间： |
|
| 查看次数： |
1871 次 |
| 最近记录： |