gpt4 book ai didi

javascript - 如何为 X 个元素关联点击功能?

转载 作者:太空宇宙 更新时间:2023-11-03 19:59:42 25 4
gpt4 key购买 nike

如果我有一个包含数百行的表,我可以为每一行和每个组件分配一个 id(因为该表是动态创建的)。
但是如果例如在每一行中,我都有一个复选框,我想将每个复选框与单击时的一个函数相关联,以在同一行的另一列中执行某些操作,我该怎么做?
我是否必须为每个复选框定义一个 onclick 方法?我如何访问同一行的另一列?

更新:
我尝试了这个建议,但它不起作用。示例:

<html>  
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>

<table id="main_table" border="1">
<tr><th>First</th><th>Last</th><th>Modify</th></tr>
<tr>
<td>Jim</td><td><input id="rep1" type="text" disabled value="X"></td><td><input class=".checkbox" type="checkbox"> </td>
</tr>
</table>
</body>
<script type="text/javascript">

$(document).delegate('change', "#main_table :checkbox", function(){
console.log("In function");
if(this.checked){ //If you want to perform checked check

alert("Hello");
}
});


</script>

</html>

更新 2:
以下也不起作用:

$("#main_table ").delegate('click', ":checkbox", function(){  
console.log("In function");
if(this.checked){ //If you want to perform checked check

alert(parentTd);
}
});

更新 3:
以下也适用:

$("#main_table ").on('click', ":checkbox", function(){  
console.log("In function");
if(this.checked){ //If you want to perform checked check

alert(parentTd);
}
});

delegate 似乎不起作用?任何人都可以向我解释我搞砸了什么吗?

最佳答案

您可以为所有这些分配一个处理程序。在处理程序中,$(this) 是被点击触发处理程序的元素,然后您可以使用 DOM 遍历方法找到与其相关的其他元素,例如

$("#yourtable").on("click", ".checkbox", function() {
$(this).closest("tr").find(".destination").text("Clicked on checkbox in this row");
});

此示例假设每行中有一个带有 class="checkbox" 的复选框,以及另一个带有 class="destination" 的字段。

更新:使用您的 HTML:

$("#main_table").on("click", ".checkbox", function () {
alert($(this).closest("tr").find("input[type=text]").val());
});

DEMO

关于javascript - 如何为 X 个元素关联点击功能?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21764922/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com