我有一个html表,其中显示用户ID,名称和电子邮件的列表。当用户单击任意行时,我将获得该行的ID号并发送到我的后端。因此,我这样做:
//Making the table
var trs = document.getElementsByTagName('tr');
for (var i = 0; i < trs.length; i++) {
trs[i].onclick = clickHandler;
}
处理点击的功能:
function clickHandler(event) {
var numb = this.innerText.match(/\d/g);
numb = numb.join("");
window.location.replace("chooseParticipant.php?id="+numb);
}
表格示例:
<div id="table">
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<td>7</td>
<td>Test User</td>
<td>testuser123@example.com</td>
</tbody>
</table>
</div>
那会发生什么?如果用户的电子邮件中包含数字,则“ numb”变量也会获取这些数字。我不知道如何仅过滤ID号。有人有什么想法吗?
答案 0 :(得分:0)
您可以为标签分配一个类。 如下所示:-
<td class="id">7</td>
在javascript代码中,您可以获取所有带有“ id”类的元素。 然后对每个按钮执行点击处理程序。
var trs = document.getElementsByClassName('id');
我希望这会有所帮助。
答案 1 :(得分:0)
尝试使用data-*
属性的此代码段
document.addEventListener('DOMContentLoaded', function(e) {
var trs = document.querySelectorAll('#table tbody tr');
var repeater = Array.prototype.slice;
repeater.call(trs).forEach(function(tr) {
tr.addEventListener('click', function(e) {
var data = tr.querySelector('td[data-id]').dataset;
console.log('id=', data.id);
});
});
});
tbody {
cursor: pointer;
}
<div id="table">
<table border="1" cellspacing="0" cellpadding="3">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td data-id="7">7</td>
<td>Test User 1</td>
<td>testuser1231@gmail.com</td>
</tr>
<tr>
<td data-id="8">8</td>
<td>Test User 2</td>
<td>testuser1232@gmail.com</td>
</tr>
<tr>
<td data-id="9">9</td>
<td>Test User 3</td>
<td>testuser1233@gmail.com</td>
</tr>
</tbody>
</table>
</div>