我需要你的帮助。
我试图在点击按钮时有选择地删除表行,但似乎代码没有正常工作,没有任何事情发生。
也许一双新鲜的眼睛可能是治疗这个眼睛的方法!
我是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>
答案 0 :(得分:3)
答案 1 :(得分:1)
将删除功能更改为:
$('#remove_row').click(function() {
$tbody.find('.highlight').remove();
});