gpt4 book ai didi

javascript - 使用 jQuery 从 HTML 表格中移除(删除)表格行

转载 作者:行者123 更新时间:2023-11-28 15:40:54 25 4
gpt4 key购买 nike

我需要你的帮助。

我试图通过单击按钮有选择地删除表格行,但代码似乎没有按预期工作,什么也没有发生。

也许一双新的眼睛可能是解决这个问题的方法!

我对 jQuery 很友好!

有问题的代码:

$('#remove_row').click(function() {

var $row = $tbody.find('.highlight')

$("#data tr").eq($row).remove();

});

这是标记

<!DOCTYPE html>

<html>

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<style type="text/css">

.highlight {

background-color: rgb(255,0,0);

}

</style>

<script type="text/javascript">

window.onload = function() {

var rowCount = $('#data >tbody >tr').length;
$("#maxrows").val(rowCount);

var $tbody = $("#data tbody").on('click', 'tr', function() {
highlight($(this));
});


$('#goto_first').click(function() {
var $first = $tbody.find('tr').first();
highlight($first);
});

$('#goto_prev').click(function() {
var $prev = $tbody.find('.highlight').prev();
highlight($prev);
});


$('#goto_next').click(function() {
var $next = $tbody.find('.highlight').next();
highlight($next);
});

$('#goto_last').click(function() {
var $last = $tbody.find('tr').last();
highlight($last);
});

$('#goto_row').click(function() {

var $row = prompt("Enter row number")

highlight($("#data tr").eq($row));

});

$('#remove_row').click(function() {

var $row = $tbody.find('.highlight')

$("#data tr").eq($row).remove();

});


function highlight($row) {
if ($row.length) {
$tbody.children().removeClass("highlight");
$row.addClass('highlight');
$("#rownum").val($row[0].rowIndex);
}
}

}
</script>

</head>

<body>

<table id="data" border="1" cellspacing="1" cellpadding="1">

<thead>
<tr>
<th>#</th>
<th>header2</th>
<th>header3</th>
<th>header4</th>
<th>header5</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>2</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>3</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>4</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>5</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
<tr>
<td>6</td>
<td>data</td>
<td>data</td>
<td>data</td>
<td>data</td>
</tr>
</tbody>
</table>
Row Number:
<br>
<input type="text" id="rownum" readonly><br>
of
<br>
<input type="text" id="maxrows" readonly>
<br>
<input type="button" id="goto_first" value="first">
<input type="button" id="goto_prev" value="prev">
<input type="button" id="goto_next" value="next">
<input type="button" id="goto_last" value="last">
<input type="button" id="goto_row" value="goto row">
<input type="button" id="remove_row" value="remove row">
</body>

</html>

最佳答案

$row 已经是对要删除的行的引用。变化:

$("#data tr").eq($row).remove();

至:

$row.remove();

<强> jsFiddle example

关于javascript - 使用 jQuery 从 HTML 表格中移除(删除)表格行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23793402/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com