[英]How to find which row I just clicked in javascript
I can't find the appropriate answer of my problem. 我找不到适合我问题的答案。 I have rows in a table and every row contain one button. 我在表中有行,每一行都包含一个按钮。 How to find the row index of button I just clicked. 如何找到我刚刚单击的按钮的行索引。
<tr>
<td>111</td>
<td>aaa</td>
<td><input type="submit" name="first" id="first" value="First" onclick="countRow(this.id)" /></td>
</tr>
<tr>
<td>222</td>
<td>bbb</td>
<td><input type="submit" name="sec" id="second" value="Second" onclick="countRow(this.id)" /></td>
</tr>
<tr>
<td>333</td>
<td>ccc</td>
<td><input type="submit" name="third" id="third" value="Third" onclick="countRow(this.id)" /></td>
</tr>
Use tbody tag and this javascript 使用tbody标签和此javascript
function countRow(id) { var table = document.getElementById('dataTable') var tbody = table.getElementsByTagName('tbody')[0] var rows = tbody.getElementsByTagName('tr'); for (i = 0; i < rows.length; i++) { rows[i].onclick = function() { alert(this.rowIndex + 1); } } }
<table id="dataTable"> <tbody> <tr> <td>111</td> <td>aaa</td> <td> <input type="submit" name="first" id="first" value="First" onclick="countRow(this.id)" /> </td> </tr> <tr> <td>222</td> <td>bbb</td> <td> <input type="submit" name="sec" id="second" value="Second" onclick="countRow(this.id)" /> </td> </tr> <tr> <td>333</td> <td>ccc</td> <td> <input type="submit" name="third" id="third" value="Third" onclick="countRow(this.id)" /> </td> </tr> </tbody> </table>
Use
indexOf
prototype of array if we castnodeList
to array. 如果将nodeList
为数组,请使用array的indexOf
原型。
Pass argument as this
(current element) instead of this.id
将参数作为this
(当前元素)而不是this.id
Try this: 尝试这个:
function countRow(elem) { var trElement = elem.parentElement.parentElement; var tr = document.getElementsByTagName('tr'); tr = Array.prototype.slice.call(tr); alert(tr.indexOf(trElement)); }
<table> <tr> <td>111</td> <td>aaa</td> <td> <input type="submit" name="first" id="first" value="First" onclick="countRow(this)" /> </td> </tr> <tr> <td>222</td> <td>bbb</td> <td> <input type="submit" name="sec" id="second" value="Second" onclick="countRow(this)" /> </td> </tr> <tr> <td>333</td> <td>ccc</td> <td> <input type="submit" name="third" id="third" value="Third" onclick="countRow(this)" /> </td> </tr> </table>
$('input[type=submit').click(function() { var trid = $(this).closest('tr').attr('id'); // table row ID $('div').text(trid); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <table> <tr id="row1"> <td>111</td> <td>aaa</td> <td><input type="submit" name="first" id="first" value="First" /></td> </tr> <tr id="row2"> <td>222</td> <td>bbb</td> <td><input type="submit" name="sec" id="second" value="Second" /></td> </tr> <tr id="row3"> <td>333</td> <td>ccc</td> <td><input type="submit" name="third" id="third" value="Third" /></td> </tr> </table> <div id="show" style="color: blue">Show the id of the current clicked row: </div>
尝试将其用于表格单元格选择器和选定单元格的操作
http://www.redips.net/javascript/table-td-merge-split/
I assume you want to know the id of the <input>
element, 我假设您想知道<input>
元素的ID,
<td><input type="submit" name="first" id="first" value="First" onclick="countRow(this.id)" /></td>
so Onclick you want to get 'first' for the above element. 因此Onclick您想让上述元素获得“第一”。
so for this modify the element as this - 所以为此修改元素为-
<td><input type="submit" name="first" id="first" value="First" onclick="countRow()" /></td>
In JavaScript : 在JavaScript中:
function countRow(){
// This would give you the id
event.target.id
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.