jQuery удаляет столбец HTML-таблицы
Просто продолжение ответа разгромить . Эфемерный диапазон портов (по крайней мере в Linux, и я подозреваю, что и другие Unices) не является фиксированным. Это можно контролировать записав в /proc/sys/net/ipv4/ip_local_port_range
Единственное ограничение (в отношении IANA) состоит в том, что порты ниже 1024 назначаются как хорошо известные порты. Порты выше, которые бесплатны для использования. Я считаю, что часто порты с номерами ниже 1024 ограничены доступом суперпользователя.
7 ответов
Через несколько лет, вероятно, пора обновить ответ на этот вопрос.
// Listen for clicks on table originating from .delete element(s)
$("table").on("click", ".delete", function ( event ) {
// Get index of parent TD among its siblings (add one for nth-child)
var ndx = $(this).parent().index() + 1;
// Find all TD elements with the same index
$("td", event.delegateTarget).remove(":nth-child(" + ndx + ")");
});
Общий способ (не тестировался):
$("a.delete").click(function() {
var colnum = $(this).closest("td").prevAll("td").length;
$(this).closest("table").find("tr").find("td:eq(" + colnum + ")").remove();
}
Нет необходимости изменять разметку.
Вот как я
Назначьте каждой ячейке в столбце одно и то же имя класса. Затем с помощью jQuery удалите все теги с этим именем класса.
jQuery:
$('.delete').click(function() {
var colNumber = $(this).parents().find('td').attr('col');
$('td[col='+colNumber+']').remove();
return false;
});
HTML:
<table border="1">
<tbody>
<tr>
<td col='1'><a href="#" class="delete">DELETE COL</a>COL 1</td>
<td col='2'><a href="#" class="delete">DELETE COL</a>COL 2</td>
<td col='3'><a href="#" class="delete">DELETE COL</a>COL 3</td>
<td col='4'><a href="#" class="delete">DELETE COL</a>COL 4</td>
<td col='5'><a href="#" class="delete">DELETE COL</a>COL 5</td>
<td col='6'><a href="#" class="delete">DELETE COL</a>COL 6</td>
</tr>
<tr>
<td col='1'>ROW 1</td>
<td col='2'>ROW 1</td>
<td col='3'>ROW 1</td>
<td col='4'>ROW 1</td>
<td col='5'>ROW 1</td>
<td col='6'>ROW 1</td>
</tr>
<tr>
<td col='1'>ROW 2</td>
<td col='2'>ROW 2</td>
<td col='3'>ROW 2</td>
<td col='4'>ROW 2</td>
<td col='5'>ROW 2</td>
<td col='6'>ROW 2</td>
</tr>
</tbody>
</table>
Попробуйте следующее:
$("a.delete").click(function(){
var td=$(this).parent();
var col=$(td).text();
col=col.substring(col.length-2)*1;
var f="td:nth-child("+col+")";
var tbl=$(td).parent().parent();
$(tbl).find("tr").each(function(){
$(this).find(f).hide();
});
Протестировано в FF3.5.
Есть одна проблема, связанная с получением номера столбца. Если количество столбцов превышает 2 цифры, это не сработает. Было бы лучше, если бы вы поместили настраиваемый атрибут и назначили ему позицию столбца.
<a class="delete" href="#" col="2">...</a>
помните, что индекс nth-child начинается с 1
Мне не очень понравилось ни одно из решений из этого поста, поэтому я придумал свое. В идеале нужно: селектор nth-of-type, который упростит задачу. Но, к сожалению, JQuery не поддерживает его «из-за отсутствия реальной полезности». Эээ ..
Вот мое решение, которое помогает с помощью выражения: nth-child:
$("a.delete").click(function(event) {
event.preventDefault();
var current_cell = $(this).closest("td");
var nb_columns = current_cell.closest('table').find('tr:eq(1) td').length+1;
var column_to_delete = current_cell.prevAll("td").length+1;
$('table tr td:nth-child('+(nb_columns+'n-'+(nb_columns-column_to_delete))+')').remove();
});
@Ответ Джонатана Сэмпсона, я изменил код, чтобы обрабатывать разметку таблицы, содержащую элемент , и обеспечить приятный эффект затухания:
$(document).ready(function(){
$("a.delete").live("click", function(){
/* Better index-calculation from @activa */
var myIndex = $(this).closest("th").prevAll("th").length;
$(this).parents("table").find("tr").each(function(){
$(this).find("td:eq("+myIndex+"), th:eq("+myIndex+")").fadeOut('slow', function() {
$(this).remove();
fixTitles();
});
});
});
});
function fixTitles() {
$("tr:eq(0) td").each(function(a){
$(this).html("<a href='#' class='delete'>Delete Row</a> COL " + (a+1));
});
}
Похожие вопросы: