在表格的每一行中添加按钮以删除该行

时间：2019-02-21 16:28:16

标签： javascript html css

仅需寻找解决此问题的简单解决方案，请考虑以下代码：

<!DOCTYPE html>
    <html>
    <head>
        <title>Javascript - Add HTML Table Row </title>
        <meta charset="windows-1252">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <form>
        <script>
            function addRow()
            {
                // get input values
                    var name = document.getElementById('name').value;
                    var currentAge = 
                document.getElementById('currentAge').value;
                    var Birthday = document.getElementById('Birthday').value;
                    var carType = document.getElementById('carType').value;
                    var Delete = document.getElementById('Delete').value;                  



                  var table = document.getElementsByTagName('table')[0];


                  var newRow = table.insertRow(table.rows.length/2+1);


                  var cel1 = newRow.insertCell(0);  
                  var cel2 = newRow.insertCell(1);
                  var cel3 = newRow.insertCell(2);
                  var cel4 = newRow.insertCell(3);
                  var cel5 = newRow.insertCell(4);



                  cel1.innerHTML = name;               
                  cel2.innerHTML = currentAge;                 
                  cel3.innerHTML = Birthday;
                  cel4.innerHTML = carType;
                  cel5.innerHTML = Delete;


           function myFunction(){
           var x = document.getElementById("table").rows.length;
           document.getElementById("demo").innerHTML = "Found " + x + " tr 
           elements in the table.";
            }


            </script>
            </form>
        </head>
    <style>


    table, th {

    border: 1px solid black;    
    }

    tbody td{
    padding: 30px;
    }


    tbody tr:nth-child(odd){
    background-color: #F4BC01;
    color: #ABC412;
    }

    $("")


    </style>

    <body>
    <h2>Basic HTML table</h2> <button onclick="myFunction()">Press me for 
    elements amount</button>
    <p id ="demo"></p>


        Name: <input type="text" name="name" id="name" /><br/><br/>
        Age: <input type="text" name="currentAge" id="currentAge" /><br/><br/>
        Date of Birth <input type="date" name="Birthday" id="Birthday" /><br/>

        <button onclick="addRow();">Display</button><br/><br/>

        <p>Eye Colour:</p>

        <select id="carType">
        <option value="ferrari"  id="ferrari">Ferrari</option>
        <option value="lamborghini"  id="lamborghini">Lamborghini</option>
        <option value="porsche"  id="porsche">Porsche</option>
        <option value="bugatti"  id="bugatti">Bugatti</option>
        <option value="pagani" id="pagani">Pagani</option>

        </select>


        <table border="1" id="table">
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Birthday</th>
                <th>CarType</th>
                <th>Delete Entry
                <button id="Delete" onclick="remove_update(event)">delete</button> //this button right here but in each row and not here. should remove said row

                </th>
            </tr>
        </table>
    </body>
</html>

我想在cel 5（删除条目）中执行的操作是向表中输入的每一行添加一个删除按钮，该行将删除该行，但不知道如何执行此操作。理想情况下，如果可能的话，希望在不使用JQuery的情况下执行此操作，因为到目前为止我还没有涉及它。

3 个答案:

答案 0 :(得分：0)

您应该做的是将innerHTML中的cel5设置为一个按钮，例如：

cel5.innerHTML = '<button type="button" class="delete-button">Delete</button>';

然后，您可以简单地在表上添加click事件监听器，并检查button元素是否发出了click事件。如果匹配，则删除最接近的<tr>元素：

document.getElementById('table').addEventListener('click', function(e) {
  // Check if click event came from delete button
  if (!e.target.classList.contains('delete-button'))
    return;

  e.target.closest('tr').remove();
});

请参见下面的概念验证示例：

function addRow() {
  // get input values
  var name = document.getElementById('name').value;
  var currentAge = document.getElementById('currentAge').value;
  var Birthday = document.getElementById('Birthday').value;
  var carType = document.getElementById('carType').value;

  var table = document.getElementsByTagName('table')[0];
  var newRow = table.insertRow(table.rows.length / 2 + 1);

  var cel1 = newRow.insertCell(0);
  var cel2 = newRow.insertCell(1);
  var cel3 = newRow.insertCell(2);
  var cel4 = newRow.insertCell(3);
  var cel5 = newRow.insertCell(4);

  cel1.innerHTML = name;
  cel2.innerHTML = currentAge;
  cel3.innerHTML = Birthday;
  cel4.innerHTML = carType;
  cel5.innerHTML = '<button type="button" class="delete-button">Delete</button>';
}


function myFunction() {
  var x = document.getElementById("table").rows.length;
  document.getElementById("demo").innerHTML = "Found " + x + "tr elements in the table.";
}

document.getElementById('table').addEventListener('click', function(e) {
  // Check if click event came from delete button
  if (!e.target.classList.contains('delete-button'))
    return;
    
  e.target.closest('tr').remove();
});
<h2>Basic HTML table</h2> <button onclick="myFunction()">Press me for 
    elements amount</button>
<p id="demo"></p>


Name: <input type="text" name="name" id="name" /><br/><br/> Age: <input type="text" name="currentAge" id="currentAge" /><br/><br/> Date of Birth <input type="date" name="Birthday" id="Birthday" /><br/>

<button onclick="addRow();">Display</button><br/><br/>

<p>Eye Colour:</p>

<select id="carType">
  <option value="ferrari" id="ferrari">Ferrari</option>
  <option value="lamborghini" id="lamborghini">Lamborghini</option>
  <option value="porsche" id="porsche">Porsche</option>
  <option value="bugatti" id="bugatti">Bugatti</option>
  <option value="pagani" id="pagani">Pagani</option>
</select>


<table border="1" id="table">
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>Birthday</th>
    <th>CarType</th>
    <th>Actions</th>
  </tr>
</table>

答案 1 :(得分：0)

您可以使用rowIndex属性删除该行。

function addRow() {
  // get input values
  var name = document.getElementById('name').value;
  var currentAge = document.getElementById('currentAge').value;
  var Birthday = document.getElementById('Birthday').value;
  var carType = document.getElementById('carType').value;

  var table = document.getElementsByTagName('table')[0];
  const index = table.rows.length;
  var newRow = table.insertRow(index);
  newRow.setAttribute('data-index', index);
  var cel1 = newRow.insertCell(0);
  var cel2 = newRow.insertCell(1);
  var cel3 = newRow.insertCell(2);
  var cel4 = newRow.insertCell(3);
  var cel5 = newRow.insertCell(4);

  cel1.textContent = name;
  cel2.textContent = currentAge;
  cel3.textContent = Birthday;
  cel4.textContent = carType;
  cel5.innerHTML = '<button onclick="removeRow(this)" type="button" class="delete-button">Delete</button>';
}


function myFunction() {
  var x = document.getElementById("table").rows.length;
  document.getElementById("demo").innerHTML = "Found " + x + "tr elements in the table.";
}


function removeRow(evt) {
  const deleteIndex = evt.parentElement.parentElement.rowIndex;
  document.getElementById("table").deleteRow(deleteIndex);
}
table,
th {
  border: 1px solid black;
}

tbody td {
  padding: 30px;
}

tbody tr:nth-child(odd) {
  background-color: #F4BC01;
  color: #ABC412;
}
<h2>Basic HTML table</h2> <button onclick="myFunction()">Press me for 
    elements amount</button>
    <p id ="demo"></p>


        Name: <input type="text" name="name" id="name" /><br/><br/>
        Age: <input type="text" name="currentAge" id="currentAge" /><br/><br/>
        Date of Birth <input type="date" name="Birthday" id="Birthday" /><br/>

        <button onclick="addRow();">Display</button><br/><br/>

        <p>Eye Colour:</p>

        <select id="carType">
        <option value="ferrari"  id="ferrari">Ferrari</option>
        <option value="lamborghini"  id="lamborghini">Lamborghini</option>
        <option value="porsche"  id="porsche">Porsche</option>
        <option value="bugatti"  id="bugatti">Bugatti</option>
        <option value="pagani" id="pagani">Pagani</option>

        </select>


        <table border="1" id="table">
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Birthday</th>
                <th>CarType</th>
                <th>Delete</th>
            </tr>
        </table>
    </body>
</html>

答案 2 :(得分：0)

在头部，添加一个功能，该功能可以理解行和单元格。在单元格的父级上调用一些删除操作（删除<tr>所在的<td>。然后在主体上向每个动态按钮添加一个onClick事件，并将您之前创建的功能设置为开启。

您可以使用如下脚本：

function deleteRow() {
    var tableData = event.target.parentNode; 
    var tableRow = tableData.parentNode;
    tableRow.parentNode.removeChild(tableRow);
}

在您创建的按钮（动态或固定）中，您应该添加一个 onClick 事件。例如：

<tr>
    <td>John Doe</td>
    <td>$10,000</td>
    <td><input type="submit" value="Delete" id="Delete" onclick="deleteRow()"></td>
</tr>
相关问题
最新问题