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

Question

How do I go about either modifying the existing Javascript code or add some code to be able to have the option to delete the highlighted (selected row) from my HTML table at the click of a button? 我该如何修改现有的Javascript代码或添加一些代码，以使其能够通过单击按钮从我的HTML表中删除突出显示的（选定的行）？

The use of jQuery is framework also fine. 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>

this seems to work, once the row number seems to accounted for. 一旦行号占了这一点，这似乎行得通。

function delete_row() {

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

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

}

Answer 1

Use this (if you know the row number) 使用它（如果您知道行号）

function delete_row() {

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

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

}

Answer 2

This only deletes a row that is selected. 这只会删除所选的行。 No need to pass in the row number. 无需传递行号。

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

You can see it working here: http://jsbin.com/gubuduli/3/edit?html,output 您可以在这里看到它的工作： http : //jsbin.com/gubuduli/3/edit?html，输出

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

问题描述

2 个解决方案

解决方案1
0 2014-05-21 16:37:59

解决方案2
0 2014-05-21 17:08:59

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

问题描述

2 个解决方案

解决方案1 0 2014-05-21 16:37:59

解决方案2 0 2014-05-21 17:08:59

解决方案1
0 2014-05-21 16:37:59

解决方案2
0 2014-05-21 17:08:59