从用JavaScript动态创建的表中删除行 [英] Delete row from table dynamically created in javaScript

问题描述

我想从JavaScript创建的表中删除一行.我尝试过此页面上其他帖子中的代码，但没有解决.

I want to delete a row from a table created by JavaScript. i tried the code from different post on this page but doesn't solve it.

function value_pass()
  {
var Delete =  document.createElement("input");
                Delete.type="button";
                Delete.name = "del"
                Delete.value = "Delete";
                Delete.onclick = function(o)
                {
                      var r = o.parentElement.parentElement;                                          
                      document.getElementById("table").deleteRow(r.rowIndex);
               }

var order_no = document.getElementById("Order_no");
var quantity = document.getElementById("quantity");
var type = document.getElementById("Recipe");
var recipe = type.options[type.selectedIndex].text;

var body1 = document.getElementsByTagName("body")[0];
var tbl = document.createElement("table");
tbl.setAttribute("id","table");
var tblbody = document.createElement("tbody");
tbl.setAttribute("border","2");

var col = document.createElement("td");

for (var j = 0; j < 1; j++) 
{
    var rows = document.createElement("tr");
    for (var i = 0; i < 4; i++)
    {
        var col1 = document.createElement("td");
        var col2 = document.createElement("td");
        var col3 = document.createElement("td");
        var col4 = document.createElement("td");
        var col5 = document.createElement("td");

        var col1text = document.createTextNode(order_no.value);
        var col2text = document.createTextNode(recipe);
        var col3text = document.createTextNode(quantity.value);
        var col4text = document.createTextNode();

            //also want to put checked values in table row


    }
    col1.setAttribute("width","150");
    col2.setAttribute("width","150");
    col3.setAttribute("width","150");
    col4.setAttribute("width","150");


    col1.appendChild(col1text);
    col2.appendChild(col2text);
    col3.appendChild(col3text);
    col4.appendChild(col4text);
    col5.appendChild(Delete);

    rows.appendChild(col1);
    rows.appendChild(col2);
    rows.appendChild(col3);
    rows.appendChild(col4);
    rows.appendChild(col5);

    tblbody.appendChild(rows);
} tbl.appendChild(tblbody);
body1.appendChild(tbl);
}

该功能将通过HTML中的按钮调用 它是一个订单表格

The function will be called by a button in HTML its an order form that

，并且还想知道要放在表格行中的复选框的选中值.

and also want to know about the checked values of checkbox to put in the table row.

推荐答案

您可以使用:

document.getElementById("myTable").deleteRow(0); //Where 0 is your row.

说明: http://www.w3schools.com/jsref/met_table_deleterow.asp

要删除当前行，请在按钮onclick="deleteRow(this)上进行设置，并在该函数中添加以下代码:

To delete the current row, set this on your button: onclick="deleteRow(this), with the following code in that function:

function deleteRow(t)
{
    var row = t.parentNode.parentNode;
    document.getElementById("myTable").deleteRow(row.rowIndex);
    console.log(row);
}

这篇关于从用JavaScript动态创建的表中删除行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！