如何从html表中获取值<tr>？

如果没有在Group1和Group2中使用td的具体原因，则可以将其修改为:

原HTML:

<tr>
<th>Device</th>
<th>Serial</th>
<th>ID</th>
<th>Name</th>
<th>Groups</th>
<th>Device</th>
<td>Group1</td>
<td>Group2</td>
</tr>

修改后的HTML:

<tr>
<th>Device</th>
<th>Serial</th>
<th>ID</th>
<th>Name</th>
<th>Groups</th>
<th>Device</th>
<th>Group1</th>
<th>Group2</th>
</tr>

下面的代码可以工作:

$("#tableid").on('click', 'td', function(e) {
//debug statement to check if it entered the function
console.log("debug: in function working") 
// to get the column index of the cell clicked
var index = $(this).index();
// debug statement to check the index
console.log(index); 
// get the table
var table = $(this).closest('table'); 
// get the header name.
var header = table.find('tr th').eq(index).text();

//debug statement to check header name
console.log(header); 
//check if the header is group 1 then pop alert not to click button
if(header == "Group1")
alert("you cannot click button");  
});

另一件事你可以做，如果td是重要的，你可以把所有的头元素在tr class="header_validate"例如，并更改行:

var header = table.find('tr th').eq(index).text();

var header = table.find('tr .header_validate').eq(index).text();

首先，如果没有特定的原因使用td标签像这样(在第一个tr标签)，那么它可以在下一个tr标签中使用。下面的解决方案适用于当前使用的标签，但有一些变化。

您可以遍历所有th标记并将innerHTML与所需条件匹配，如果匹配则获得i值(即具有该值的标记)。

使用i值打印输出

function func() {
var trTag = document.querySelector("tr");
var thTag = trTag.querySelectorAll("th");
for (let i = 0; i < thTag.length; i++) {
if (thTag[i].innerHTML === "Group1")
var current = i;
}
document.querySelector("#demo").innerHTML = thTag[current].innerHTML;
thTag[current].style.backgroundColor = "red"
}

<table class="table table-striped table-bordered" id="tableid">
<tbody>
<tr>
<th>Device</th>
<th>Serial</th>
<th>ID</th>
<th>Name</th>
<th>Groups</th>
<th>Device</th>
<th>Group1</th>
<th>Group2</th>
</tr>
<tr>
<td>TY83-FPSX-C3WS</td>
<td>xxx1</td>
<td>test1</td>
<td>John</td>
<td> Driver</td>
<td>DKFU-V7ZE-RD9R</td>
<td>
<div class="col" classname="col">
<select name="group1" id="groupId">
<option>Null</option>
<option value="IT">IT</option>
<option value="Cleaning">Cleaning</option>
<option value="Accountant">Accountant</option>
</select>
</div>
</td>
<td>
<div class="col" classname="col">
<select name="group1" id="groupId">
<option>Null</option>
<option value="IT">IT</option>
<option value="Cleaning">Cleaning</option>
<option value="Accountant">Accountant</option>
</select>
</div>
</td>
</tr>
<tr>
<td>4SB9-NR2D-742E</td>
<td>xxx2</td>
<td>test2</td>
<td>Cena</td>
<td>Telesales</td>
<td>DqwdKFU-VqwdZE-RD9R</td>
<td>
<div class="col" classname="col">
<select name="group1" id="groupId">
<option>Null</option>
<option value="IT">IT</option>
<option value="Cleaning">Cleaning</option>
<option value="Accountant">Accountant</option>
</select>
</div>
</td>
<td>
<div class="col" classname="col">
<select name="group1" id="groupId">
<option>Null</option>
<option value="IT">IT</option>
<option value="Cleaning">Cleaning</option>
<option value="Accountant">Accountant</option>
</select>
</div>
</td>
</tr>
</tbody>
</table>
<button onclick="func()">Click</button>
<div id="demo"></div>