Question

我真的需要你的帮助，

如何通过单击按钮，使用精彩，多功能，臭名昭着的jQuery框架删除HTML表格中的选定（突出显示的行）。

我猜我需要找到它的行索引，我不确定，然后继续删除它。 jQuery代码将会发生什么？

以下是HTML标记：

<!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() {
function highlight(tableIndex) {

    // Just a simple check. If .highlight has reached the last, start again
    if( (tableIndex+1) > $('#data tbody tr').length ) {

        tableIndex = 0;
    }
    // Element exists?
    if($('#data tbody tr:eq('+tableIndex+')').length > 0)
    {
        // Remove other highlights
        $('#data tbody tr').removeClass('highlight');

        // Highlight your target
        $('#data tbody tr:eq('+tableIndex+')').addClass('highlight');

        $("#rownum").val(tableIndex+1);
    }
}

$('#goto_first').click(function() {
    highlight(0);
});

$('#goto_prev').click(function() {
    highlight($('#data tbody tr.highlight').index() - 1);
});

$('#goto_next').click(function() {
    highlight($('#data tbody tr.highlight').index() + 1);
});

$('#goto_last').click(function() {
    highlight($('#data tbody tr:last').index());
});

$( "#data tbody tr" ).click(function() {
    highlight($(this).index());
});

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

    var row = prompt("Enter the row number to highlight")

    highlight(row-1)

});




$(document).keydown(function (e) {

    switch(e.which) 
    {
        case 38:
            $('#goto_prev').trigger('click');
            break;
        case 40:
            $('#goto_next').trigger('click');
            break;
    }

 });

}
</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>

Answer 1

使用jQuery删除行本身：

$('.highlight').remove();

或者在纯JavaScript中：

var highlightedRows = document.getElementsByClassName('highlight');
while (highlightedRows.length) {
    highlightedRows[0].parentNode.removeChild(highlightedRows[0]);
}

参考文献：

JavaScript的：
- document.getElementsByClassName()。
- Node.removeChild()。
- while ()。
jQuery的：
- remove()。

使用jQuery删除HTML表中的选定（突出显示的行）

1 个答案: