我有很多表，每个表都有一个ID，（table1,2,3，...），每一个表都有很多TD <td><a href
示例：
<table id="myTable1" class="someclass">
<tbody>
<tr>
<td>blablabla</td>
<td><a href="domaine.com">random text</a></td>
<td><a href="domaine.com">randomtext</a></td>
</tr>
</tbody>
</table>
</td>
<table id="myTable2" class="someclasse">
<tbody>
<tr>
<td>blablabla</td>
<td><a href="domaine.com">random text</a></td>
<td><a href="domaine.com">randomtext</a></td>
</tr>
</tbody>
</table>
</td>
（不要看HTML代码，现在不重要）
我的目标是打开表“table X”中的所有href，然后在新标签中打开它们。我用
var els = document.getElementById("myTable1").querySelectorAll("a[href^='https://domaine.']");
for (var i = 0, l = els.length; i < l; i++) {
var el = els[i];
alert(el)
window.open (el,"_blank");
}
它就像一个魅力。现在我想为每个表添加一个复选框，如果选中此选项则打开我检查的“{”表上的href（我做了一些innerHTML到“插入”复选框）。现在我的问题是，当我选中复选框时，如何获取表格ID？
例如，我检查具有“table6”的表，然后打开该表中的每个链接。
table id = 1（复选框）
table id = 2（复选框） 等
如果我勾选复选框，它将获得id为2的表
答案 0 :(得分：0)
您可以使用closest获取最近的表格，然后就可以从中获取ID。
// List of checkboxes
let inputs = Array.from(document.querySelectorAll('input[type=checkbox]'))
// Add a click event to each
inputs.forEach(input => {
input.addEventListener('click', e => {
let target = e.currentTarget
// If the checkbox isn't checked end the event
if (!target.checked) return
// Get the table and id
let table = target.closest('table')
let id = table.id
console.log(id)
})
})<table id="abc">
<tr>
<td><input type="checkbox"></td>
</tr>
</table>
<table id="def">
<tr>
<td><input type="checkbox"></td>
</tr>
</table>
<table id="ghi">
<tr>
<td><input type="checkbox"></td>
</tr>
</table>
<table id="jkl">
<tr>
<td><input type="checkbox"></td>
</tr>
</table>
您说您正在动态添加复选框，因此您不希望像我上面那样执行querySelectorAll。您需要在创建时添加它：
// List of tables
let tables = Array.from(document.querySelectorAll('table'))
// insert the checkbox dynamically
tables.forEach(table => {
table.innerHTML = '<tr><td><input type="checkbox"></td></tr>'
// Get the checkbox
let checkbox = table.querySelector('input[type=checkbox]')
// Add an eventlistener to the checkbox
checkbox.addEventListener('click', click)
})
function click(e) {
let target = e.currentTarget
// If the checkbox isn't checked end the event
if (!target.checked) return
// Get the table and id
let table = target.closest('table')
let id = table.id
console.log(id)
}<table id="abc">
</table>
<table id="def">
</table>
<table id="ghi">
</table>
<table id="jkl">
</table>
答案 1 :(得分：0)
...我想在每个表格中添加一个复选框，如果[已经]选中了...打开
href[in]“我检查过的表格...当我检查时如何获取表格ID复选框？
鉴于您要查找包含复选框id的{{1}}的{{1}}，以便通过其{{1}选择<table>你不需要<input>;您只需找到正确的<table>。
为此，我建议在每个id元素上放置一个事件监听器，并打开其中的相关链接。例如（请记住，在Stack Overflow上打开新窗口/标签时存在限制，我只需设置相关的id元素的样式而不是打开它们）：
<table>
<table><a>function highlight(e) {
// here we find the Static NodeList of <a> elements
// contained within the <table> element (the 'this'
// passed from EventTarget.addEventListener()) and
// convert that Array-like collection to an Array
// with Array.from():
Array.from(this.querySelectorAll('a'))
// iterating over the Array of <a> elements using
// Array.prototype.forEach() along with an Arrow
// function:
.forEach(
// here we toggle the 'ifCheckboxChecked' class-name
// via the Element.classList API, adding the class-name
// if the Event.target (the changed check-box, derived
// from the event Object passed to the function from the
// EventTarget.addEventListener function) is checked:
link => link.classList.toggle('ifCheckboxChecked', e.target.checked)
);
}
// converting the Array-like Static NodeList returned
// from document.querySelectorAll() into an Array:
Array.from(document.querySelectorAll('table'))
// iterating over the Array of <table> elements:
.forEach(
// using an Arrow function to pass a reference to the
// current <table> element (from the Array of <table>
// elements to the anonymous function, in which we
// add an event-listener for the 'change' event and
// bind the named highlight() function as the event-
// handler for that event:
table => table.addEventListener('change', highlight)
);
参考文献：