Javascript 不确定如何删除表中的（突出显示/选定行）_Javascript_Dom_Row

Javascript 不确定如何删除表中的（突出显示/选定行）

javascript dom

Javascript 不确定如何删除表中的（突出显示/选定行）,javascript,dom,row,Javascript,Dom,Row,我如何修改现有的Javascript代码或添加一些代码，以便能够在单击按钮时从HTML表中删除突出显示的（选中的行）选项 jQuery在框架中的使用也很好 <!DOCTYPE html> <html> <head> <title>Table Row Demo</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <styl

我如何修改现有的Javascript代码或添加一些代码，以便能够在单击按钮时从HTML表中删除突出显示的（选中的行）选项

jQuery在框架中的使用也很好

<!DOCTYPE html>
<html>
<head>
<title>Table Row Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
tr.normal td {
    color: black;
    background-color: white;
}
tr.highlighted td {
    color: white;
    background-color: red;
}
</style>
<script type="text/javascript">

window.onload = function() {

    test()

}

function test() {

    var trows = document.getElementById('mstrTable').rows, t = trows.length, trow, nextrow,
    rownum = document.getElementById('rownum'),

    addEvent = (function(){return window.addEventListener? function(el, ev, f){
            el.addEventListener(ev, f, false); //modern browsers
        }:window.attachEvent? function(el, ev, f){
            el.attachEvent('on' + ev, function(e){f.apply(el, [e]);}); //IE 8 and less
        }:function(){return;}; //a very old browser (IE 4 or less, or Mozilla, others, before Netscape 6), so let's skip those
    })();

    rownum.value = rownum.defaultValue; //reset for browsers that remember input values on reload

    while (--t > -1) {
        trow = trows[t];
        trow.className = 'normal';
        addEvent(trow, 'click', highlightRow);
    }//end while

    function highlightRow(gethighlight) { //now dual use - either set or get the highlighted row
        gethighlight = gethighlight === true;
        var t = trows.length;
        while (--t > -1) {
            trow = trows[t];
            if(gethighlight && trow.className === 'highlighted'){return t;}
            else if (!gethighlight){
                if(trow !== this) { trow.className = 'normal'; }
                else if(this.className === 'normal') { rownum.value = t; }
                else { rownum.value = rownum.defaultValue; }
            }
        }//end while

        return gethighlight? null : this.className = this.className === 'highlighted'? 'normal' : 'highlighted';
    }//end function

    function movehighlight(way, e){
        e.preventDefault && e.preventDefault();
        e.returnValue = false;
        var idx = highlightRow(true); //gets current index or null if none highlighted
        if(typeof idx === 'number'){//there was a highlighted row
            idx += way; //increment\decrement the index value
            if(idx && (nextrow = trows[idx])){ return highlightRow.apply(nextrow); } //index is > 0 and a row exists at that index
            else if(idx){ return highlightRow.apply(trows[1]); } //index is out of range high, go to first row
            return highlightRow.apply(trows[trows.length - 1]); //index is out of range low, go to last row
        }
        return highlightRow.apply(trows[way > 0? 1 : trows.length - 1]); //none was highlighted - go to 1st if down arrow, last if up arrow
    }//end function

    function processkey(e){
        switch(e.keyCode){
            case 38: {//up arrow
                return movehighlight(-1, e)
            }
            case 40: {//down arrow
                return movehighlight(1, e);
            }
            default: {
                return true;
            }
        }
    }//end function

    addEvent(document, 'keydown', processkey);
    addEvent(window, 'unload', function(){}); //optional, resets the page for browsers that remember the script state on back and forward buttons

}//end function
</script>
</head>
<body>
<div>
  Current Row: <input type="text" id="rownum" value="None" readonly>
  <table id="mstrTable" cellspacing="0" border="1">
     <thead>
      <tr> 
        <th>File Number</th>
        <th>Date1</th>
        <th>Date2</th>
        <th>Status</th>
        <th>Num.</th>
      </tr>
    </thead>
    <tbody>
      <tr> 
        <td>KABC</td>
        <td>09/12/2002</td>
        <td>09/12/2002</td>
        <td>Submitted</td>
        <td>1</td>

      </tr>
      <tr> 
        <td>KCBS</td>
        <td>09/11/2002</td>
        <td>09/11/2002</td>
        <td>Lockdown</td>
        <td>2</td>
      </tr>

      <tr> 
        <td>WFLA</td>
        <td>09/11/2002</td>
        <td>09/11/2002</td>
        <td>Submitted</td>
        <td>3</td>
      </tr>
      <tr> 
        <td>WTSP</td>
        <td>09/15/2002</td>
        <td>09/15/2002</td>
        <td>In-Progress</td>
        <td>4</td>
      </tr>
    </tbody>
  </table>
</div>
<br><br>
<input type="button" value="delete this row" onclick="delete_row()"/>
</body>
</html>

使用此选项（如果您知道行号）

这仅删除选定的行。不需要传入行号

function delete_row() {    
    document.querySelector(".highlighted").remove();    
}

您可以看到它在这里工作：

如果未选择任何行，它将根据浏览器删除标题行或最后一行

function delete_row() {

    var r = document.getElementById("rownum").value

    document.getElementById("mstrTable").deleteRow(r);

}

function delete_row() {    
    document.querySelector(".highlighted").remove();    
}