Question

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

<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();

请帮助我

Answer 1

您可以执行此操作，而无需使用this引用来跟踪ID。请参阅下面的示例。更好的是将事件处理程序附加在Javascript中而不是内联。从表中进行事件委派将是完美的选择。（$('#list).on('click', '.deleteButton', deleterow);）

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(this)>Delete</button></td></tr>";
  $(rows).appendTo("#list tbody");
}

function ResetForm() {
  document.getElementById("person").reset();
}

function deleterow(el) {
  $(el).closest('tr').remove();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

Answer 2

两个问题：

"</td><td><button onclick="deleterow(id)">Delete</button></td></tr>"

应该是

"</td><td><button onclick=deleterow(" + id + ")>Delete</button></td></tr>"

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

"</td><td><button onclick = deleterow(" + name + ")>Delete</button></td></tr>"

如何在脚本中的表行中添加删除按钮？

2 个答案: