Question

我正在创建一个基本数据库，该数据库仅作为Javascript中的实践存储在内存中。每个新行都有自己相应的删除和编辑按钮。我现在的问题是如何使这些删除按钮工作，当你点击一个它删除它的行。这是我目前的代码：

的Javascript

function onload(){
$("#addbutton").on("click",addRow);

$(".delete").onclick(function(){
   $(this).closest('tr').remove(); 
});

    var i = 1;

    function addRow(){        
        var newRow = "<tr rowID='" + i + "'>"+"<td><div>"+$("#namebox").val()+
                    "</div></td>"+"<td><div>"+$("#surnamebox").val()+"</div></td>"+"<td><div>"+$("#agebox").val()+"<td><div><button id='" + i + "' class='delete' name='delete'type='button'>DELETE</button></div></td>"+"<td><div><button class='edit' name='edit'type='button'>EDIT</button></div></td><td><p>"+ i + "</p></td></tr>"; //Adds the row with content and 
                            // buttons
        $(newRow).appendTo("#maintable"); //Append the new row
            // to the table
        // Next three commands clear the input boxes
        $("#namebox").val('');
        $("#surnamebox").val('');
        $("#agebox").val('');
        // Add to the numer of rows in the table
        i++;
    }// addRow END
};

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Memory-Only Database</title>
<link rel="stylesheet" href="css/style.css">
<script src="js/script.js"></script>
<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-
ui.min.js"></script>
</head>
<body onload="onload()">
<div id="header">
    <h2>Memory-Only Database</h2>
</div>
<div id="input-table">
<table id="maintable" style="width: 60%">
    <tr>
        <th>Name</th>
        <th>Surname</th>
        <th>Age</th>
        <th id="buttons1">buttons1</th>
        <th id="buttons2">buttons2</th>
        <th id="counter">counter</th>
    </tr>
    <tr>
        <td>
            <input id="namebox" name="name" type="text" value="">
        </td>
        <td>
            <input id="surnamebox" name="surname" type="text" value="">
        </td>
        <td>
            <input id="agebox" name="age" type="number" value="">
        </td>
        <td>
            <button id="addbutton" name="add" type="button">ADD</button> 
        </td>
    </tr>
    </table>
   </div>
    </body>    
    </html>

CSS

body{
 background-color: darkcyan;
}

div#header{
 position: relative;
 left: 30em;
 width: 18em;
 text-align: center;
}
div#input-table{
 width:50em;
}

table,th,tr,td{
 border: 1px solid black;
 border-collapse: collapse;    
}

td{
text-align: center;
}

th#buttons{
width: inherit;
 }

Answer 1

jQuery中没有onclick方法，而是使用click。

$(".delete").click(function() {
  $(this).closest("tr").remove();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>Row 1</td>
    <td><button class="delete">Del</button></td>
  </tr>
  <tr>
    <td>Row 2</td>
    <td><button class="delete">Del</button></td>
  </tr>
  <tr>
    <td>Row 3</td>
    <td><button class="delete">Del</button></td>
  </tr>
</table>

Answer 2

您应该使用事件委派删除按钮。因为你是动态添加按钮的。

$(document).on("click",'.delete',function(){

   $(this).closest('tr').remove(); 
});

function onload(){
$("#addbutton").on("click",addRow);


    var i = 1;

    function addRow(){        
        var newRow = "<tr rowID='" + i + "'>"+"<td><div>"+$("#namebox").val()+
                    "</div></td>"+"<td><div>"+$("#surnamebox").val()+"</div></td>"+"<td><div>"+$("#agebox").val()+"<td><div><button id='" + i + "' class='delete' name='delete'type='button'>DELETE</button></div></td>"+"<td><div><button class='edit' name='edit'type='button'>EDIT</button></div></td><td><p>"+ i + "</p></td></tr>"; 
//Adds the row with content and 
                            // buttons
        $(newRow).appendTo("#maintable"); //Append the new row
            // to the table
        // Next three commands clear the input boxes
        $("#namebox").val('');
        $("#surnamebox").val('');
        $("#agebox").val('');
        // Add to the numer of rows in the table
        i++;
    }// addRow END
};


$(document).on("click",'.delete',function(){
    
   $(this).closest('tr').remove(); 
});

body{
 background-color: darkcyan;
}

div#header{
 position: relative;
 left: 30em;
 width: 18em;
 text-align: center;
}
div#input-table{
 width:50em;
}

table,th,tr,td{
 border: 1px solid black;
 border-collapse: collapse;    
}

td{
text-align: center;
}

th#buttons{
width: inherit;
 }

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-
ui.min.js"></script>
</head>
<body onload="onload()">
<div id="header">
    <h2>Memory-Only Database</h2>
</div>
<div id="input-table">
<table id="maintable" style="width: 60%">
    <tr>
        <th>Name</th>
        <th>Surname</th>
        <th>Age</th>
        <th id="buttons1">buttons1</th>
        <th id="buttons2">buttons2</th>
        <th id="counter">counter</th>
    </tr>
    <tr>
        <td>
            <input id="namebox" name="name" type="text" value="">
        </td>
        <td>
            <input id="surnamebox" name="surname" type="text" value="">
        </td>
        <td>
            <input id="agebox" name="age" type="number" value="">
        </td>
        <td>
            <button id="addbutton" name="add" type="button">ADD</button> 
        </td>
    </tr>
    </table>
   </div>

Answer 3

另一种可以删除行的方法....在添加新行时为该行提供一个id并在删除期间调用onclick函数。

 function deleterow(id){
     $("#newrow-"+id+"").remove();
}
function onload(){
$("#addbutton").on("click",addRow);


var i = 1;

function addRow(){        
    var newRow = "<tr id='newrow-"+i+"'>"+"<td><div>"+$("#namebox").val()+
                "</div></td>"+"<td><div>"+$("#surnamebox").val()+"</div></td>"+"<td><div>"+$("#agebox").val()+"<td><div><button id='" + i + "' class='delete' name='delete' type='button' onclick='deleterow("+i+")'>DELETE</button></div></td>"+"<td><div><button class='edit' name='edit'type='button' >EDIT</button></div></td><td><p>"+ i + "</p></td></tr>"; //Adds the row with content and 
                        // buttons
    $(newRow).appendTo("#maintable"); //Append the new row
        // to the table
    // Next three commands clear the input boxes
    $("#namebox").val('');
    $("#surnamebox").val('');
    $("#agebox").val('');
    // Add to the numer of rows in the table
    i++;
}// addRow END

};

body{
 background-color: darkcyan;
}

div#header{
 position: relative;
 left: 30em;
 width: 18em;
 text-align: center;
}
div#input-table{
 width:50em;
}

table,th,tr,td{
 border: 1px solid black;
 border-collapse: collapse;    
}

td{
text-align: center;
}

th#buttons{
width: inherit;
 }

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-
ui.min.js"></script>
</head>
<body onload="onload()">
<div id="header">
    <h2>Memory-Only Database</h2>
</div>
<div id="input-table">
<table id="maintable" style="width: 60%">
    <tr>
        <th>Name</th>
        <th>Surname</th>
        <th>Age</th>
        <th id="buttons1">buttons1</th>
        <th id="buttons2">buttons2</th>
        <th id="counter">counter</th>
    </tr>
    <tr>
        <td>
            <input id="namebox" name="name" type="text" value="">
        </td>
        <td>
            <input id="surnamebox" name="surname" type="text" value="">
        </td>
        <td>
            <input id="agebox" name="age" type="number" value="">
        </td>
        <td>
            <button id="addbutton" name="add" type="button">ADD</button> 
        </td>
    </tr>
    </table>
   </div>

JQuery - 如果单击删除按钮，则删除表行

3 个答案: