Как получить ячейку из таблицы HTML с помощью jquery или DOM? - PullRequest
Новая
       13

Как получить ячейку из таблицы HTML с помощью jquery или DOM?

1 голос
/ 20 июня 2019

У меня есть неизменяемая таблица HTML с CSS.Мне нужно получить значение из первого столбца, чтобы отфильтровать его.Я не могу найти функцию jquery или DOM для этого,

  1. Поскольку я не мог понять, как получить значение ячейки, я попытался получить значение первого столбца.
  2. Первый столбец выделен жирным шрифтом.Я пытался получить его с помощью жирного тега, но это не сработало. 
<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">&nbsp;</span> Adresse<br />
            Stundenplan 2016/2017<span style="width:10px">&nbsp;</span> <span style="width:10px">&nbsp;</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>

Вывод: 5a undefined

1 Ответ

3 голосов
/ 20 июня 2019

Во-первых, селектор для элемента <b> просто 'b', а не '<b>'.

Во-вторых, querySelectorAll() возвращает nodeList, поэтому у этого объекта нет свойства innerHTML. Поскольку в таблице несколько b элементов, вам нужно использовать цикл для построения строки из них всех. Вы можете сделать это неявно, используя map().

Наконец, в приведенном ниже примере обратите внимание на использование .mon_list в селекторе, чтобы ограничить извлекаемые элементы только теми элементами в целевой таблице, а также :nth-child(1) для извлечения ячеек первого столбца.

Также, как отметил Т.Дж. Толпясь в комментариях, вам лучше не полагаться на существование элемента b в ячейке и просто читать textContent из td напрямую.

С учетом всего сказанного попробуйте следующее: 

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...