#javascript #jquery
Вопрос:
У меня есть простая таблица, и я хочу добавить определенный текст, если элемент пуст, пока мой код выглядит так:
$("table").each(function (index, tableID) {
$(tableID)
.find("thead tr th")
.each(function (index) {
index = 1;
$(tableID)
.find("tbody tr td:nth-child(" index ")")
.attr("data-title", $(this).text());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>By Year</th>
<th>TEAM</th>
<th>GP</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>GSW</td>
<td>6.1</td>
</tr>
<tr>
<th>2016-17</th>
<td>GSW</td>
<td>6.1</td>
</tr>
<tr>
<th>2015-16</th>
<td>GSW</td>
<td>6.1</td>
</tr>
</tbody>
</table>
С помощью этого кода я добавляю data-title
, и все работает нормально, чего я пытаюсь добиться, чтобы добавить -
, когда данных нет: поэтому я изменяю свой код:
$( "table" ).each( function( index, tableID ) {
$( tableID ).find( "thead tr th" ).each( function( index ) {
index = 1;
$( tableID ).find( "tbody tr td:nth-child(" index ")" ).attr( "data-title", $(this).text() );
if ($("tbody tr td:nth-child(" index ")" ).is(':empty')).append( "-" );
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>By Year</th>
<th>TEAM</th>
<th>GP</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>GSW</td>
<td>6.1</td>
</tr>
<tr>
<th>2016-17</th>
<td>GSW</td>
<td>6.1</td>
</tr>
<tr>
<th>2015-16</th>
<td>GSW</td>
<td>6.1</td>
</tr>
</tbody>
</table>
Эта часть кода, где я добавляю -
, когда элемент таблицы пуст, не работает, может ли кто-нибудь попытаться помочь мне с этим?
Комментарии:
1. У вас есть вопрос и код. В чем ваша настоящая проблема?
2. @jabaa, эта часть кода, в которой я добавляю — когда элемент таблицы пуст, не работает
3. Вы не можете вызывать метод по
if
условию:if ($("tbody tr td:nth-child(" index ")" ).is(':empty')).append
Ответ №1:
В вашем if
заявлении не используется допустимый синтаксис. Вам нужно тело выражения после if
того, которое содержит код для выполнения. Вы не можете вызвать метод из самого if
оператора.
Попробуйте это:
$("table").each(function(_, table) {
$(table).find("thead tr th").each(function(i) {
let $th = $(this);
let $td = $(table).find("tbody tr td:nth-child(" (i 1) ")");
$td.attr("data-title", $th.text());
if ($td.is(':empty')) {
$td.append("-");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>By Year</th>
<th>TEAM</th>
<th>GP</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>GSW</td>
<td>6.1</td>
</tr>
<tr>
<th>2016-17</th>
<td>GSW</td>
<td>6.1</td>
</tr>
<tr>
<th>2015-16</th>
<td>GSW</td>
<td>6.1</td>
</tr>
</tbody>
</table>
Однако стоит отметить, что этот код можно сделать более кратким с помощью одной строки кода:
$('tbody td:empty').text('-');
Код, который вы используете для перебора th
/ td
и добавления data
атрибута, кажется почти полностью избыточным, поскольку th
значение может быть считано в момент использования.
Ответ №2:
Я немного упростил код. Мне было проще сделать значения заголовка-значения заголовка массивом, на который я мог бы ссылаться на каждой итерации. «- «для пустых значений было просто троичным выражением, прикрепленным к концу цепочки jQuery:
$(this).attr("data-title", h[i]).text($(this).text() || "-");
$("table").each(function() {
let h = [], i = 0
$("thead tr th").each(function() {
h.push($(this).text());
})
$(this).find("tbody tr>*").each(function() {
$(this).attr("data-title", h[i]).text($(this).text() || "-");
i ;
if (i >= h.length) i = 0
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>By Year</th>
<th>TEAM</th>
<th>GP</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>GSW</td>
<td>6.1</td>
</tr>
<tr>
<th>2016-17</th>
<td>GSW</td>
<td>6.1</td>
</tr>
<tr>
<th>2015-16</th>
<td>GSW</td>
<td>6.1</td>
</tr>
</tbody>
</table>