Javascript 如何将删除按钮添加到表'；脚本中的行是什么？_Javascript_Jquery_Html

Javascript 如何将删除按钮添加到表'；脚本中的行是什么？

javascript jquery html

Javascript 如何将删除按钮添加到表'；脚本中的行是什么？,javascript,jquery,html,Javascript,Jquery,Html,我有这个代码，我想在表的每一行添加删除按钮但是我的问题是桌子在桌子里面那么我如何添加删除行呢？我希望表中每行的删除行只删除按钮显示的行 <html> <div id = "data"> <form id = "person"> <br><br> Name: <select id = "locapavm" name = "pavlocation" > <

我有这个代码，我想在表的每一行添加删除按钮但是我的问题是桌子在桌子里面那么我如何添加删除行呢？我希望表中每行的删除行只删除按钮显示的行

<html>
<div id = "data">
    <form id = "person">    
        <br><br>
        Name: <select id = "locapavm" name = "pavlocation" >
        <option value="rami">rami</option>
        <option value="lara">lara</option>
        <option value="ahmed">ahmed</option>
            </select>
        <br><br>
        City: <select id="sevepavm" name="pavseverity">
    <option value="">- Severity -</option>
    <option value="Low">Low</option>
    <option value="Medium"> Medium</option>
    <option value="High">High</option>
</select>
        <br><br>
<textarea id="planpavm" name="pavplan" ></textarea>
        <input id = "button" type = "button" value = " Reset " onclick = "ResetForm()">
        <input id = "button" type = "button" value = " Add " onclick = "AddData()">        
    </form>
</div>

<h3>List Of Persons</h3>
<div id = "tab">
        <table id = "list" cellspacing = "0px" cellpadding = "20px" text-align = "center">
            <thead>
                <tr>
                    <td>Name</td>
                    <td>Seve</td>
                    <td>plan</td>
                </tr>
            </thead>

            <tbody>

            </tbody>
        </table>
</div>
</html>





姓名：
拉米
劳拉
艾哈迈德



城市：
-严重性-
低
中等
高



人员名单
名称
七
计划

这是剧本

function AddData(){

            var rows = "";
            var name = document.getElementById("locapavm").value;
            var city = document.getElementById("sevepavm").value;
            var plan = document.getElementById("planpavm").value;


            rows += "<tr><td>" + name + "</td><td>" + city + "</td><td>" + plan + "</td><td><button onclick = "deleterow(id)">Delete</button></td></tr>";
            $(rows).appendTo("#list tbody");
        }   
    }

    function ResetForm(){
        document.getElementById("person").reset();
    }
   function deleterow(id){
     $("#rows-"+id+"").remove();

函数AddData（）{
var行=”；
var name=document.getElementById（“locapavm”）.value；
var city=document.getElementById（“sevepavm”）.value；
var plan=document.getElementById（“planpavm”）.value；
行+=“”+名称+“”+城市+“”+计划+“删除”；
$（行）。附加到（“#列表主体”）；
}   
}
函数ResetForm（）{
document.getElementById（“person”）.reset（）；
}
函数deleterow（id）{
$（“#行-“+id+”）.remove（）；

请帮我解决两个问题：

“删除”

应该是

“删除”

此外，函数中没有id变量。我建议改用名称作为标识符：

“Delete”

您无需使用

this

引用跟踪id即可执行此操作。请参见下面的示例。更好的做法是使用Javascript而不是内联方式附加事件处理程序。表中的事件委派非常适合此操作。（

$（'#list）。on（'click'，'deleteButton'，deleterow）

）

函数AddData（）{
var行=”；
var name=document.getElementById（“locapavm”）.value；
var city=document.getElementById（“sevepavm”）.value；
var plan=document.getElementById（“planpavm”）.value；
行+=“”+名称+“”+城市+“”+计划+“删除”；
$（行）。附加到（“#列表主体”）；
}
函数ResetForm（）{
document.getElementById（“person”）.reset（）；
}
函数deleterow（el）{
$（el）.最近（'tr'）.remove（）；
}




姓名：
拉米
劳拉
艾哈迈德


城市：
-严重性-
低
中等
高



人员名单
名称
七
计划

由于引号不匹配，您的控制台可能出现语法错误。请将它们转义（\”），并使用与其他所有操作相同的

“+id+”

模式（例如，

计划

）对于id，我还有一个问题…我如何将表中的所有数据一次发送到数据库，因为当按submit时，只有最后一行插入到数据库中，而不是所有的tableOn标准表单提交，它提交的数据来自输入元素，而不是表元素。提交数据有多种方式。我想说编写一个ajax请求从表中发送数据的uest。