如何找到我刚刚在javascript中单击的行
How to find which row I just clicked in javascript
我找不到我问题的适当答案。我在表格中有行,每行包含一个按钮。如何找到我刚刚点击的按钮的行索引。
<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 标签和这个 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>
如果我们
nodeList
indexOf
数组转换为数组,请使用数组的原型。
将参数传递为this
(当前元素(而不是this.id
试试这个:
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/
我假设你想知道<input>
元素的id,
<td><input type="submit" name="first" id="first" value="First" onclick="countRow(this.id)" /></td>
所以在点击上你想得到上述元素的"第一个"。
因此,为此将元素修改为:
<td><input type="submit" name="first" id="first" value="First" onclick="countRow()" /></td>
在 JavaScript 中:
function countRow(){
// This would give you the id
event.target.id
}
相关文章:
- ASP.NET通过单击JavaScript按钮触发c#事件
- 单击“JavaScript显示变量”
- Servlet仅在单击JavaScript警报消息后重定向
- 计时器自动运行,而不是单击javascript按钮
- 单击javascript按钮显示/隐藏Div元素
- 单击Javascript按钮,将值添加到文本框中
- 如何通过单击javascript中的按钮来修改输入数字字段
- 使用HtmlUnit单击javascript按钮
- 通过单击Javascript中的nextdate按钮,可以增加日期、日期、月份和年份
- 单击JavaScript[Close]更改文本
- 单击javascript中的按钮运行python脚本
- 单击Javascript中的事件计数器
- 单击JavaScript添加和删除类函数
- Ajax通过单击javascript按钮更改php状态
- 运行代码以在Android应用程序中单击javascript按钮?尝试在页面上抓取回复按钮联系信息 craigslist
- 在 Ruby/Watir 中单击 JavaScript
- 加载/卸载单击Javascript
- 按钮单击Javascript函数失败,但函数有效
- PowerShell 脚本,用于单击 JavaScript 按钮
- 不显示我在回发后右键单击 JavaScript 时显示的列表