#javascript #jquery
#javascript #jquery
Вопрос:
У меня возникают проблемы, когда дело доходит до удаления строки из таблицы. У меня есть 2 таблицы, одна из которых требует, чтобы я удалил X количество строк, поэтому я использовал jquery.в каждом цикле я просто использовал $ (value).remove(), и это работает.
Теперь у меня есть другая таблица, в которой пользователь удаляет по одной строке за раз. Итак, я подумал, что сделаю то же самое.
('#MyTable tbody tr td img:even').click(function()
{
// check if they are sure if they want to delete. If true go on
// now get this row they clicked on
var row = $('#MyTable tbody tr td img:even').parents('tr');
// do some ajax stuff
$(row).remove();
});
Итак, я подумал, что это сработает, поскольку это похоже на то, что я сделал с циклом jquery. Я проверил, что находится в «строке», выполнив alert($(row).html());
В результате получается соответствующая строка, которую я хочу удалить. Я сделал то же самое для «value» в каждом цикле jquery (таблица, которая у меня есть). Он также содержит строку, о которой идет речь, для удаления.
Итак, для меня это одно и то же, поскольку они оба выдают строку таблицы. Но тот, что в цикле jquery, работает.
Где находятся «строки», способа нет. Что происходит, так это удаление всех строк в таблице.
Я не понимаю, почему..
Спасибо
Отредактируйте вот таблицу. Я думаю, что именно этот плагин jquery alert устраняет «это»
найдено здесь http://abeautifulsite.net/notebook/87
<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style type="text/css">
#popup_container
{
font-family: Arial, sans-serif;
font-size: 12px;
min-width: 300px; /* Dialog will be no smaller than this */
max-width: 600px; /* Dialog will wrap after this width */
background: #FFF;
border: solid 5px #999;
color: #000;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#popup_title
{
font-size: 14px;
font-weight: bold;
text-align: center;
line-height: 1.75em;
color: #666;
background: #CCC url(Images/Alerts/title.gif) top repeat-x;
border: solid 1px #FFF;
border-bottom: solid 1px #999;
cursor: defau<
padding: 0em;
margin: 0em;
}
#popup_content
{
background: 16px 16px no-repeat url(Images/Alerts/info.gif);
padding: 1em 1.75em;
margin: 0em;
}
#popup_content.alert
{
background-image: url(Images/Alerts/info.gif);
}
#popup_content.confirm
{
background-image: url(Images/Alerts/important.gif);
}
#popup_content.prompt
{
background-image: url(Alerts/help.gif);
}
#popup_message
{
padding-left: 48px;
}
#popup_panel
{
text-align: center;
margin: 1em 0em 0em 1em;
}
#popup_prompt
{
margin: .5em 0em;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.alerts.js"></script>
</head>
<body>
<table class="class" id="MyTable">
<thead>
<tr>
<th>
</th>
<th>
Header 1
</th>
<th>
Header 2
</th>
<th>
Header 3
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<a>
<img alt="" src="img1">a</a><a><img alt="" src="img2">b</a>
</td>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
</tr>
<tr>
<td>
<a>
<img alt="" src="img1"></a>c<a><img alt="" src="img2">d</a>
</td>
<td>
4
</td>
<td>
5
</td>
<td>
6
</td>
</tr>
</tbody>
</table>
</body>
</html>
<script type="text/javascript">
$(document).ready(function()
{
$('#MyTable tbody tr td a:odd').live("click", function()
{
jConfirm('Do you wish to delete?.', 'Deletion', function(d)
{
if (d == true)
{
var row = $(this).parents('tr');
// can maybe omit this. Problem might be with jConfirm.
$.post("Test", null, function(r)
{
row.remove();
});
}
});
});
});
</script>
Вот контроллер (я использую asp.net mvc, но вы можете переключиться на что угодно, поскольку я не думаю, что проблема может возникнуть на стороне сервера).
// В том же контроллере. Индексное представление содержит весь приведенный выше html. Тест — это то, что вызывается.
public ActionResult Index()
{
return View();
}
public ContentResult Test()
{
return Content("hi");
}
Комментарии:
1. row.remove() удаляет все строки в таблице, потому что вы вызываете remove для набора всех родительских элементов even img, а не для одной строки таблицы, как вы ожидаете. Вместо этого используйте ключевое слово this, чтобы обнулить конкретный img, который вызвал событие click, как описано TheVillageIdiot и в моих собственных ответах.
2. где, как я уже говорил, я получаю нулевую ссылку. То, что вы говорите, имеет смысл, поскольку я действительно удивлен, что то, что у меня есть, работает. Например, когда я смотрел на это, мне было интересно, почему получается только одна строка, а не все из них. Тем не менее, когда я распечатываю html, он содержит только одну строку. Почему отображается только одна строка?
3. Спасибо за добавление HTML. если вы измените строку var = … строка в строке var = $(this).parents(‘tr’) у вас должны быть лучшие результаты. В этой операции вы собираете более одной строки таблицы.
4. Хм, судя по примеру, который я вам показал, это сработает. Но в моем реальном коде это не работает. Я предполагаю, что это потому, что, возможно, в моем примере я не включил ajax.post и плагин jquery alert.
5. Ищите способы назначения переменной row между строкой .parents(«tr») и вызовом remove(). Должно быть, что-то сбрасывает эту переменную в null.
Ответ №1:
попробуйте:
var row = $(this).parents('tr');//use this to get current row
// do some ajax stuff
$(row).remove();
Комментарии:
1. Я думаю, row.remove() будет достаточно. строка уже является обернутым набором.
2. да, я пытался это сделать, но. Он возвращает «null», я подумал, что это потому, что он проходит через плагин оповещения jquery, и, возможно, «это» относится к тому, что тогда.
3. это относится к элементам img, которым соответствует селектор ‘#MyTable tbody tr td img:even’.
4. да, @David, и мы используем этот элемент image, чтобы получить строку, в которой он содержится.
5. @TheVillageIdiot: понятно. Я хотел сказать, что переменная row представляет собой набор, завернутый в jQuery. Вы снова оборачиваете ее следующей строкой, $ (row), и я не считаю, что это необходимо.
Ответ №2:
Вы можете использовать функции DOM для удаления строк таблицы, как в:
var row = $('#MyTable tbody tr td img:even').parents('tr');
var parentTableDOMElement = row.parents("table:first")[0];
parentTableDOMElement.deleteRow(row[0].rowIndex);
Обратите внимание, что родительская функция должна возвращать набор, завернутый в jQuery, поэтому нет необходимости переносить его снова, используя код типа $(row).
Кажется, я понимаю, почему вы получаете переменные строки null. Вы не удаляете по одной строке за раз. Скорее всего, при каждом нажатии вы находите все элементы img, соответствующие селектору, и для каждого из них удаляете их родительские строки таблицы одним движением.
Комментарии:
1. Извините, я не понимаю этого. таким образом, row получает эту строку. После этого я заблудился.
2. Вторая строка, присваиваемая parentTableDOMElement, возвращает непосредственный элемент таблицы, родительский для строки. Синтаксис [0] извлекает базовый элемент DOM в отличие от набора, обернутого в jQuery, который вы используете в другом месте кода. Имея в руках элемент DOM, вы вызываете deleteRow, используя RowIndex базового элемента DOM row.
Ответ №3:
Попробуйте следующий базовый HTML и посмотрите, удалена ли вторая строка. Это должно убедить вас в том, что row.remove() действительно работает и что, возможно, что-то еще не работает.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test bed</title>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr id="test">
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready
(
function()
{
$("tr#test").remove();
}
);
</script>
Ответ №4:
Попробуйте использовать «ближайший» tr:
('#MyTable tbody tr td img:even').click(function()
{
// check if they are sure if they want to delete. If true go on
// now get this row they clicked on
var row = $(this).closest('tr');
// do some ajax stuff
$(row).remove();
});