使用JQuery在页面中监听表格多一行少一行
要在页面中使用jQuery监听表格的行数变化，可以使用DOMSubtreeModified事件或MutationObserver接口。以下是使用MutationObserver的示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table Row Change Listener</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<table id="myTable">
<tr><td>Row 1</td></tr>
</table>
<button id="addRow">Add Row</button>
<button id="removeRow">Remove Row</button>
<script>
$(document).ready(function() {
var table = document.getElementById('myTable');
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.type === 'childList') {
console.log('Table row count changed.');
console.log('Current row count:', table.rows.length);
}
});
});
var config = { attributes: false, childList: true, subtree: false };
observer.observe(table, config);
$('#addRow').click(function() {
$('#myTable').append('<tr><td>New Row</td></tr>');
});
$('#removeRow').click(function() {
if (table.rows.length > 1) {
$('#myTable tr:last').remove();
}
});
});
</script>
</body>
</html>在这个示例中，我们定义了一个MutationObserver来监听table元素的子节点变化。当添加或删除表格的行时，MutationObserver的回调函数会被触发，并打印出行数变化的信息。使用MutationObserver是比DOMSubtreeModified更现代、更高效的方式来监听DOM变化。
评论已关闭