В таблице HTML измените первую ячейку каждой строки данных навместо элемента <td>, используя jQuery?

Question

Я пытаюсь использовать jQuery, чтобы изменить первую ячейку в каждой строке таблицы HTML так, чтобы вместо элемента <td> она была <th scope="row">.Полная таблица, которая производится с использованием d3, доступна в этот Plunker .Вот отрывок:

<tbody>
<tr>
   <td>Total</td>
   <td>36,000</td>
   <td>6,118</td>
   <td>5,034</td>
   <td>5,496</td>
</tr>
<tr>
   <td>Percent_patients</td>
   <td>100</td>
   <td>16.8</td>
   <td>13.8</td>
   <td>15.1</td>
</tr>
</tbody>

Я пытаюсь сделать так:

<tbody>
<tr>
   <th scope="row">Total</th>
   <td>36,000</td>
   <td>6,118</td>
   <td>5,034</td>
   <td>5,496</td>
</tr>
<tr>
   <th scope="row">Percent_patients</th>
   <td>100</td>
   <td>16.8</td>
   <td>13.8</td>
   <td>15.1</td>
</tr>
</tbody>

Я пытался следовать аналогичным примерам здесь на SO, но я 'У меня проблемы даже с первыми шагами, то есть с выделением первой ячейки каждой строки (и изменением чего-либо об этом).Например, я попытался добавить $("#switchable-table tr td:first-child").addClass("black");, но, похоже, это не регистрируется.

Кто-нибудь может продемонстрировать решение, основанное на my Plunker ?

Answer 1

Вот способ d3 сделать это.Вам не нужно использовать jQuery .

1. Снял d.index с добавленных вами td.
2. Добавить d.index используя другой выбор.

Соответствующий код:

trs.selectAll('th')
    .data(function (d) { return [d.index]; })
    .enter()
    .append('th')
    .attr('scope', 'row')
    .text(function (d) { return d; });

А вот обновленный Plunkr:

http://plnkr.co/edit/JKaSXMiegsPdmv3fBVOK?p=preview

Кроме того, на шаге, где вы связываете data с td s, вы можете заменить его массивом headers, в котором уже есть все необходимые заголовки.Здесь:

trs.selectAll('td')
    .data(function(d){ return headers.map(function(key) { return d[key];}); })

Надеюсь, это поможет.

Answer 2

Например, я попытался добавить $ ("# switchable-table tr td: first-child"). AddClass ("black");

switchable-table isnэто не идентификация, это класс, так что ...

$(".switchable-table tr td:first-child").addClass("black");

Answer 3

«Я пытаюсь использовать jQuery, чтобы изменить первую ячейку в каждой строке таблицы HTML, чтобы вместо <td> element это было <th scope="row">» - хотя вы можете изменить это после факта,почему вы хотите сделать это таким образом?Вместо того, чтобы изменить элемент после факта, вы можете добавить элемент th для начала.

Здесь вы добавляете элементы td для каждой строки:

    trs.selectAll('td')
      .data(function(d){ return [d.index, d['Total'],   d['PRIMARY Alcohol only'],  d['Alcohol with secondary drug'],   d['Heroin'],    d['Other opiates'], d['Cocaine (smoked)'],  d['Cocaine (other route)'], d['Marijuana'], d['Amphetamines'],  d['Other stimulants'],  d['Tranquilizers'], d['Sedatives'], d['Hallucinogens'], d['PCP'],   d['Inhalants'], d['Other/Unknown']]; })
      .enter()
      .append('td')
      .text(function(d){
        return d;
      });

Вместо этого добавьте элемент th и затем перейдитечерез цикл ввода, чтобы ввести остальные tds:

    trs.append("th")
      .text(function(d) { return d.index; })
      .attr("scope","row")

    trs.selectAll('td')
      .data(function(d){ return [d['Total'],    d['PRIMARY Alcohol only'],  d['Alcohol with secondary drug'],   d['Heroin'],    d['Other opiates'], d['Cocaine (smoked)'],  d['Cocaine (other route)'], d['Marijuana'], d['Amphetamines'],  d['Other stimulants'],  d['Tranquilizers'], d['Sedatives'], d['Hallucinogens'], d['PCP'],   d['Inhalants'], d['Other/Unknown']]; })
      .enter()
      .append('td')
      .text(function(d){
        return d;
      });

Обновлено plunker

Answer 4

Чтобы выбрать первую ячейку в каждой строке, вы должны использовать селектор :first-child , поскольку вы знаете, что первым дочерним элементом будет ячейка.Вы сказали, что это не работает, но это работает (если я предполагаю, что у вас на столе id="switchable-table").:-) Возможно, вы запускали свою функцию $(...) слишком рано: поместите теги script в самый конец документа, непосредственно перед закрывающим тегом </body>.

Чтобы заменить один элемент надругой, вы бы использовали replaceWith.

Итак:

$("#switchable-table tr td:first-child").replaceWith('<th scope="row"></th>');

Это достаточно разумно, чтобы заменить каждый элемент в отдельности.

$("#switchable-table tr td:first-child").replaceWith('<th scope="row"></th>');

<table id="switchable-table">
<tbody>
<tr>
   <td>Total</td>
   <td>36,000</td>
   <td>6,118</td>
   <td>5,034</td>
   <td>5,496</td>
</tr>
<tr>
   <td>Percent_patients</td>
   <td>100</td>
   <td>16.8</td>
   <td>13.8</td>
   <td>15.1</td>
</tr>
</tbody>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>