Html 选中html表中的复选框时获取行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18487046/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get row when checking checkbox in html table
提问by user1145581
I have a HTML table with a checkbox in one of the columns. I want to know how I could get the row data when the user clicks on the checkbox with javascript (without jquery)? Can anyone please help me with this?
我有一个 HTML 表格，其中一列中有一个复选框。我想知道当用户使用 javascript（没有 jquery）单击复选框时如何获取行数据？任何人都可以帮我解决这个问题吗？
Thanks
谢谢
回答by Mark
You could try something like this:
你可以尝试这样的事情：
HTML:
HTML：
<table>
<thead>
<tr><th></th><th>Row Text</th></tr>
</thead>
<tr>
<td><input type="checkbox" /></td>
<td>Test</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>Test 2</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>Test 3</td>
</tr>
</table>
JavaScript:
JavaScript：
checkboxes = document.getElementsByTagName("input");
for (var i = 0; i < checkboxes.length; i++) {
var checkbox = checkboxes[i];
checkbox.onclick = function() {
var currentRow = this.parentNode.parentNode;
var secondColumn = currentRow.getElementsByTagName("td")[1];
alert("My text is: " + secondColumn.textContent );
};
}
JSFiddle: http://jsfiddle.net/markwylde/wzPHF/1/
JSFiddle：http: //jsfiddle.net/markwylde/wzPHF/1/
回答by Harutyun Imirzyan
HTML DOMsolves your problem
HTML DOM解决您的问题
<script type="text/javascript">
function getRow(n) {
var row = n.parentNode.parentNode;
var cols = row.getElementsByTagName("td");
var i=0;
while (i < cols.length) {
alert(cols[i].textContent);
i++;
}
}
</script>
<table>
<tr>
<td><input type="checkbox" onclick="getRow(this)" /></td>
<td>aaa</td>
<td>bbb</td>
</tr>
<tr>
<td><input type="checkbox" onclick="getRow(this)" /></td>
<td>ccc</td>
<td>ddd</td>
</tr>
<tr>
<td><input type="checkbox" onclick="getRow(this)" /></td>
<td>eee</td>
<td>fff</td>
</tr>
</table>
EDIT:this script will help you more, I think:
编辑：这个脚本会帮助你更多，我认为：
function getRow(n) {
var row = n.parentNode.parentNode;
var cols = row.getElementsByTagName("td");
var i = 0;
while (i < cols.length) {
var val = cols[i].childNodes[0].nodeValue
if (val != null) {
alert(val);
}
i++;
}
回答by captainpoop
if you're new :
如果你是新来的：
onChange EVENT of the checkbox will call the function that i named "checking"
复选框的 onChange 事件将调用我命名为“检查”的函数
it will send "This.checked", which means, will send True or false to the function "checking", Then i go in the function get that True or False that was sent, and put it in a variable i called "temp".
它将发送“This.checked”，这意味着，将向函数“checking”发送真或假，然后我进入函数获取发送的真或假，并将其放入我称为“temp”的变量中.
HTML: onchange="checking(this.checked)" <--- sending out : "This.checked" ( This = the object that creates the Event onchange, and .checked, is the propriety) you could even send multiple info like this : onchange="checking(this.checked,this.id)" and so on.
HTML: onchange="checking(this.checked)" <--- 发送: "This.checked" (This = 创建 Event onchange 的对象，并且 .checked 是专有的) 你甚至可以发送多个信息，比如this : onchange="checking(this.checked,this.id)" 等等。
JAVASCRIPT :function checking(temp) <--- this is how it gets the "this.checked" in HTML, and put it in the variable temp. to receive multiple infos : function checking(temp,temp2) and so on.(name it like you want)
JAVASCRIPT :function checks(temp) <--- 这就是它如何在 HTML 中获取“this.checked”，并将其放入变量 temp 中。接收多个信息：函数检查（temp，temp2）等等。（随意命名）
then i run a 'IF' with the variable "temp" and if the value of it = true, then do alert.
然后我用变量“temp”运行一个'IF'，如果它的值=真，那么做警报。
Hope it helps, think about it and work it so it fits what you need !
希望它有所帮助，考虑一下并进行操作，使其适合您的需要！
HTML :
HTML :
<table>
<tr>
<td>
<input type="checkbox" value=""onchange="checking(this.checked)">
</td>
<td>
<label>Something Here</label>
</td>
</tr>
</table>
JAVASCRIPT :
爪哇脚本：
function checking(temp)
{
if(temp == true)
{
alert("Checkbox is checked");
}
else
{
alert("Checkbox is NOT checked");
}
}
回答by Prasad
This will give you content of row directly(all td in tr) HTML:
这将直接为您提供行的内容（tr 中的所有 td）HTML：
<table>
<tr id="tr1">
<td>
<input type="checkbox" value="chkbox1" id="chk1">
</td>
<td>
Lorem ipsum text
</td>
</tr>
<tr id="tr2">
<td>
<input type="checkbox" value="chkbox2" id="chk2">
</td>
<td>
Lorem ipsum text
</td>
</tr>
</table>
Jquery:
查询：
$(document).ready(function(){
$('#chk1, #chk2').on('change',function(){
if($('#chk1').prop('checked') || $('#chk2').prop('checked'))
{
var ids=$(this).parent().parent().html();
alert(ids);
}
else
{
}
});
})
回答by Nickolay Kondratenko
if your select is in td directly, try the following:
如果您的选择直接在 td 中，请尝试以下操作：
sel.onclick = function(){
row = this.parentNode.parentNode
//then what you need
}
Note that first you have to find sel with either document.getElementById() or document.getElementsByTagName()
请注意，首先您必须使用 document.getElementById() 或 document.getElementsByTagName() 找到 sel
Also you may need to handle onchange event instead of onclick
此外，您可能需要处理 onchange 事件而不是 onclick
