Чтобы разбить таблицу и иметь только первые 3 столбца:
newT = jQuery('<tr></tr>');
jQuery('.PrintTable table:lt(3)').each(
function(i,el){
td = jQuery('<td/>');
td.append(jQuery(el).clone());
newT.append(td);
});
jQuery('.PrintTable').html(newT);
Если вы хотите сохранить первый столбец в качестве заголовка для дальнейших разрывов, используйте селектор :first
и добавьте его в пересечениестолбцов.
jQuery('.PrintTable :gt(3):lt(6)')
и вы получите первый столбец и столбцы между индексами 3 и 6.
Вы можете фактически объединить 2, так что вам нужно только изменить 2 индексасоздать правильные таблицы. Это код, который вам понадобится.
newT = jQuery('<tr></tr>');
jQuery('.PrintTable table:first').add('.PrintTable table:gt(0):lt(3)').each(
function(i,el){
td = jQuery('<td/>');
td.append(jQuery(el).clone());
newT.append(td);
});
jQuery('.PrintTable').html(newT);
Объяснение кода :
newT будет содержать новый элемент tr, который мы будемдобавить новый контент таблиц в.Мы заменим старый верхний элемент tr на этот.
Затем мы выберем все вложенные таблицы с помощью .PrintTable table
, получим первый столбец заголовка с помощью :first
и добавим дополнительные столбцы, выбранные с помощью :gt(index)
и:lt(index)
где мы передаем индекс для использования.gt = больше чем, lt = ниже чем.
Теперь у нас есть все столбцы, которые мы хотим использовать, поэтому мы используем функцию each()
, чтобы добавить каждый элемент к подготовленному td
.
* 1030.* После этого мы можем поменять старый тд на новый, чтобы заменить старую таблицу новой.
То, что ты действительно хочешь сделать, хотя, чтобы сделать код таблицы менее понятным, улучшить читаемость иСинтаксис, а также, таким образом, возможность печати и стилизация следующие:
Структурируйте его в одну таблицу, так как это всего лишь одна таблица данных.Используйте теги <th>
для заголовков в тегах не <thead>
.
<table>
<thead>
<tr>
<th>Type Of Transaction</th>
<th>2006</th>
<th>2007</th>
</tr>
</thead>
<tbody>
<tr>
<th>Name</th>
<td>Andi</td>
<td>tom</td>
</tr>
<tr>
<th>Age</th>
<td>25</td>
<td>26</td>
</tr>
</tbody>
</table>