如何使用jquery或DOM从HTML表中获取单元格？
[英]How do i get a cell from a HTML table with jquery or DOM?
问题描述
I have a unchangeable HTML table with CSS. 
我有一个不可更改的HTML表格。 I need to get the value from the first column to filter it. 我需要从第一列获取值来过滤它。 I can't find the jquery or DOM function to do that, 我找不到jquery或DOM函数来做到这一点，
- Because i couldn't figure out how to get the value of an cell, i tried to get the value of the first column. 因为我无法弄清楚如何获取单元格的值，我试图获得第一列的值。
- The first column is bold. 第一列是粗体。 I tried to get it via the bold tag, but it didn't worked. 我试图通过粗体标记来获取它，但它没有用。
<html>
<head>
<title>title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="expires" content="0">
</head>
<body>
<table class="mon_head">
<tr>
<td valign="bottom"></td>
<td align="right" valign="bottom">
<p>School <span style="width:10px"> </span> Adresse<br />
Stundenplan 2016/2017<span style="width:10px"> </span> <span style="width:10px"> </span> Stand: 01.12.2017 10:12</p>
</td>
</tr>
</table>
<center>
<div class="mon_title">9.12.2016 Freitag</div>
<table class="info" >
<tr class="info"><th class="info" align="center" colspan="2">Nachrichten zum Tag</th></tr>
<tr class='info'><td class='info' colspan="2">Indubio Müsli</td></tr>
</table>
<p>
<table class="mon_list" >
<tr class='list'>
<th class="list" align="center"><b>Klasse(n)</b></th>
<th class="list" align="center">Stunde</th>
<th class="list" align="center">(Lehrer)</th>
<th class="list" align="center"><b>Vertreter</b></th>
<th class="list" align="center">Fach</th><th class="list" align="center">Raum</th>
<th class="list" align="center">Vertretungs-Text</th>
</tr>
<tr class='list odd'>
<td class="list" align="center"><b>5a</b></td>
<td class="list" align="center">5</td>
<td class="list" align="center">Se</td>
<td class="list" align="center"><b>Ma</b></td>
<td class="list" align="center">BNT-b</td>
<td class="list" align="center">2.25</td>
<td class="list" align="center">Vertretung</td></tr>
<tr class='list even'>
<td class="list" align="center"><b>5a</b></td>
<td class="list" align="center">6</td>
<td class="list" align="center">Se</td>
<td class="list" align="center"><b>---</b></td>
<td class="list" align="center">---</td>
<td class="list" align="center">---</td>
<td class="list" align="center">frei</td></tr>
<tr class='list odd'>
<td class="list" align="center"><b>5c</b></td>
<td class="list" align="center">1</td>
<td class="list" align="center">Mü</td>
<td class="list" align="center"><b>Au</b></td>
<td class="list" align="center">M</td>
<td class="list" align="center">1.23</td>
<td class="list" align="center">Aufgaben</td></tr>
<tr class='list even'>
<td class="list" align="center"><b>5c</b></td>
<td class="list" align="center">2</td>
<td class="list" align="center">Mü</td>
<td class="list" align="center"><b>Gi</b></td>
<td class="list" align="center">M</td>
<td class="list" align="center">1.23</td>
<td class="list" align="center">Aufgaben</td></tr>
</table>
</p>
<p id="ausgabe"></p>
</center>
<script>
function filtern(){
//Doesn't work
var klasse = "5a " + document.querySelectorAll('<b>').innerHTML;
document.getElementById("ausgabe").innerHTML = klasse
}
</script>
</body>
</html>
The output is: 5a undefined 输出为：5a undefined
1 个解决方案
解决方案1
3 已采纳 2019-06-20 10:01:18
Firstly the selector for the <b> element is just 'b' , not '<b>' . 首先， <b>元素的选择器只是'b' ，而不是'<b>' 。
Secondly, querySelectorAll() returns a nodeList, so there's no innerHTML property on that object. 其次， querySelectorAll()返回一个nodeList，因此该对象上没有innerHTML属性。 As there are multiple b elements in the table you need to use a loop to build a string from them all. 由于表中有多个b元素，因此您需要使用循环从它们构建一个字符串。 You can do this implicitly by using map() . 您可以使用map()隐式执行此操作。
Finally, in the example below, note the use of .mon_list in the selector to restrict the retrieved elements to only those within the target table and also :nth-child(1) to retrieve the first column cells. 最后，在下面的示例中，请注意在选择器中使用.mon_list将检索到的元素限制为仅限于目标表中的元素，并且还:nth-child(1)以检索第一个列单元格。
Also, as noted by TJ Crowder in the comments, you would be better off not relying on the existence of the b element in the cell and just reading the textContent of the td directly. 另外，正如TJ Crowder在评论中所指出的那样，最好不要依赖单元格中b元素的存在，而只是直接读取td的textContent 。
With all that said, try this: 尽管如此，试试这个：
function filtern() { var klasse = Array.from(document.querySelectorAll('.mon_list td:nth-child(1)')).map(function(el) { return el.textContent; }).join(', '); document.getElementById("ausgabe").innerHTML = klasse } filtern();
<table class="mon_list"> <tr class='list'> <th class="list" align="center"><b>Klasse(n)</b></th> <th class="list" align="center">Stunde</th> <th class="list" align="center">(Lehrer)</th> <th class="list" align="center"><b>Vertreter</b></th> <th class="list" align="center">Fach</th> <th class="list" align="center">Raum</th> <th class="list" align="center">Vertretungs-Text</th> </tr> <tr class='list odd'> <td class="list" align="center"><b>5a</b></td> <td class="list" align="center">5</td> <td class="list" align="center">Se</td> <td class="list" align="center"><b>Ma</b></td> <td class="list" align="center">BNT-b</td> <td class="list" align="center">2.25</td> <td class="list" align="center">Vertretung</td> </tr> <tr class='list even'> <td class="list" align="center"><b>5a</b></td> <td class="list" align="center">6</td> <td class="list" align="center">Se</td> <td class="list" align="center"><b>---</b></td> <td class="list" align="center">---</td> <td class="list" align="center">---</td> <td class="list" align="center">frei</td> </tr> <tr class='list odd'> <td class="list" align="center"><b>5c</b></td> <td class="list" align="center">1</td> <td class="list" align="center">Mü</td> <td class="list" align="center"><b>Au</b></td> <td class="list" align="center">M</td> <td class="list" align="center">1.23</td> <td class="list" align="center">Aufgaben</td> </tr> <tr class='list even'> <td class="list" align="center"><b>5c</b> </td> <td class="list" align="center">2</td> <td class="list" align="center">Mü</td> <td class="list" align="center"><b>Gi</b></td> <td class="list" align="center">M</td> <td class="list" align="center">1.23</td> <td class="list" align="center">Aufgaben</td> </tr> </table> <p id="ausgabe"></p>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.