Таблица цикла для четного количества строк в JQuery
Вопрос, который у меня есть таблица, извлекаемая из бэкэнда для событий, будет отображаться шрифтом в 3 разных столбцах с определенными категориями, но иногда бывает только 1 событие или 2, но мне нужно отображать как минимум 3 элемента. Поэтому я пытаюсь использовать jQuery для каждой функции, чтобы проверить, сколько строк в таблице, если только 1 добавляет 2 строки, если только 1 строка добавляет 2 вместо этого. Таким образом, таблица будет одинаковой высоты независимо от количества отображаемых событий.
Мой код работает некорректно, поэтому я надеялся, что кто-нибудь сможет мне с этим помочь.
Вот мой пример кода: http://jsfiddle.net/s2devfrg/
Вот jQuery:
jQuery(function(){
jQuery('#table-amount tbody').each(function(){
let number =jQuery(this).find('tr').length;
console.info('amount' + number);
//if table only have one add two extra row
if (number === 1){
jQuery(this).append("<tr> </tr>");
jQuery(this).append("<tr> </tr>");
} else {
//if table only have two add one roe
if (number === 2 ){
jQuery(this).append("<tr> </tr>");
}
}
})
})
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Селектор, который вы используете на .each, неправильный. Нет элементов с переданным идентификатором.
Также в вашем HTML есть пара пустых tr's, которые я удалил.
Попробуйте этот код ниже:
jQuery(function(){
jQuery(".table tbody").each(function(){
let number =jQuery(this).find('tr').length;
console.info('amount' + number);
//if table only have one add two extra row
if (number === 1){
jQuery(this).append("<tr><td> </td></tr><tr><td> </td></tr");
} else if (number === 2 ){
jQuery(this).append("<tr><td> </td></tr>");
}
})
}).row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<div class = "container">
<div class = "row">
<div class = "col">
<table class = "table">
<thead class = "table-amount">
<tr>
<th scope = "col">#</th>
<th scope = "col">First</th>
<th scope = "col">Last</th>
<th scope = "col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope = "row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
</tbody>
</table>
</div>
<div class = "col">
<table class = "table">
<thead>
<tr>
<th scope = "col">#</th>
<th scope = "col">First</th>
<th scope = "col">Last</th>
<th scope = "col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope = "row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope = "row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope = "row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<div class = "col">
<table class = "table">
<thead>
<tr>
<th scope = "col">#</th>
<th scope = "col">First</th>
<th scope = "col">Last</th>
<th scope = "col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope = "row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope = "row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>Обновлен ссылка на скрипку
Я просмотрел ваш пример кода, прежде всего обратите внимание, что в jQuery
когда вы найдете tr, он подсчитает общее количество строк, включая tr внутри thead.
Так что ваши
общее количество всегда на единицу больше, чем фактических строк.
Во-вторых, вы не должны добавлять только tr, вы должны предоставить такую же структуру
как в
ваши существующие строки.
Также в первой структуре таблицы у вас был один лишний th, возможно опечатка.
В первой и третьей структуре таблиц у вас есть один дополнительный tr с пустым
структура
вместо этого у вас должна быть такая же структура, как у других.
вот ссылка на измененную ссылку JS Fiddle
https://jsfiddle.net/patelmurtuza/kj8zgqad/
Праншу верен, если вы измените свой селектор вместо .table на jQuery (". Table tbody"), он будет считать только строки внутри tbody. его до вас вы можете использовать в любом случае.
Вы действительно разместили свой ответ в виде кода, потому что переполнение стека не позволяет вам добавлять ссылки JSFiddle без кода? Пожалуйста, исправьте ответ и включите соответствующие отрывки из скрипки.
Я очень новичок в stackoverflow, чтобы ответить на вопрос. Может ли кто-нибудь помочь мне с рекомендациями, чтобы опубликовать ответ. Я также попытался вставить код, прежде чем предоставить ссылку JS Fiddle. Но не смог правильно поставить
Спасибо, Мартин, не могли бы вы дать краткое руководство, если вам нужно опубликовать ответ.
@maRtin Большое спасибо за ваш ответ! Я тоже попробую. Спасибо.
Именно то, что мне нужно. Спасибо большое за вашу помощь.