javascript - 在 JavaScript 中动态删除行

Question

我正在制作一个表单(一个简单的 WEB 表单，基于 Tom Negrino、JavaScript 8 和 w3Schools 的脚本)，用户按下“提交”按钮，表单中的一些字段将显示在下面的一个表中表格。

这就是结果

Form

现在，我想删除该行，但仅删除用户点击相应行时想要删除的行。

这是我的 JavaScript

window.onload = initForms;

function initForms() {
    for (var i=0; i< document.forms.length; i++) {
        document.forms[i].onsubmit = validForm;
    }
    document.getElementById("sunroof").onclick = doorSet;

    document.getElementById("estado").selectedIndex = 0;
    document.getElementById("estado").onchange = populateDays;

    /***********/
    //document.getElementsByTagName("form")[0].onsubmit = addNode;
    /***********/

    document.getElementById("env").onclick = function() {
        myFunction()
    };

}

function validForm() {
    var allGood = true;
    var allTags = document.getElementsByTagName("*");

    for (var i=0; i<allTags.length; i++) {
        if (!validTag(allTags[i])) {
            allGood = false;
        }
    }
    return allGood;

    function validTag(thisTag) {
        var outClass = "";
        var allClasses = thisTag.className.split(" ");

        for (var j=0; j<allClasses.length; j++) {
            outClass += validBasedOnClass(allClasses[j]) + " ";
        }

        thisTag.className = outClass;

        if (outClass.indexOf("invalid") > -1) {
            invalidLabel(thisTag.parentNode);
            thisTag.focus();
            if (thisTag.nodeName == "INPUT") {
                thisTag.select();
            }
            return false;
        }
        return true;

        function validBasedOnClass(thisClass) {
            var classBack = "";

            switch(thisClass) {
                case "":
                case "invalid":
                    break;
                case "reqd":
                    if (allGood && thisTag.value == "") {
                        classBack = "invalid ";
                    }
                    classBack += thisClass;
                    break;
                case "radio":
                    if (allGood && !radioPicked(thisTag.name)) {
                        classBack = "invalid ";
                    }
                    classBack += thisClass;
                    break;
                case "email":
                    if (allGood && !validEmail(thisTag.value)) classBack = "invalid ";
                    break;
                case "isNum":
                case "isZip":
                    classBack += thisClass;
                    break;
                default:
                    if (allGood && !crossCheck(thisTag,thisClass)) {
                        classBack = "invalid ";
                    }
                    classBack += thisClass;
            }
            return classBack;
        }

        function crossCheck(inTag,otherFieldID) {
            if (!document.getElementById(otherFieldID)) {
                return false;
            }
            return (inTag.value != "" || document.getElementById(otherFieldID).value != "");
        }

        function validEmail(email) {
            var re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;

            return re.test(email);
        }

        function radioPicked(radioName) {
            var radioSet = "";

            for (var k=0; k<document.forms.length; k++) {
                if (!radioSet) {
                    radioSet = document.forms[k][radioName];
                }
            }
            if (!radioSet) {
                return false;
            }
            for (k=0; k<radioSet.length; k++) {
                if (radioSet[k].checked) {
                    return true;
                }
            }
            return false;
        }

        /****Veamos si esto funciona****/

        /*function checkboxPicked(checkboxName) {
            var checkboxSet = "";

            for (var k = 0; k < document.forms.length; k++) {
                if (!checkboxSet) {
                    checkboxSet = document.forms[k][checkboxName];
                }
            }
            if (!checkboxSet) {
                return false;
            }
            for ( k = 0; k < checkboxSet.length; k++) {
                if (checkboxSet[k].checked) {
                    return true;
                }
            }
            return false;
        }*/

        /*****************************************/

        function invalidLabel(parentTag) {
            if (parentTag.nodeName == "LABEL") {
                parentTag.className += " invalid";
            }
        }
    }
}

function populateDays() {
    var tamps = new Array("Ikon Hatch", "Fiesta", "Focus", "Mustang");
    var nvoleon = new Array("Aveo", "Spark");
    var slp = new Array("Gol", "CrossFox", "Clasico", "Jetta");

    var estado = document.getElementById("estado");
    var estadoStr = estado.options[estado.selectedIndex].value;

    if (estadoStr != "") {
        var valueEst = parseInt(estadoStr);
        document.getElementById("ciudad").options.length = 0;

        if (valueEst == 0) {
            for (var i = 0; i < tamps.length; i++) {
                document.getElementById("ciudad").options[i] = new Option(tamps[i]);
            }
        } else if (valueEst == 1) {
            for (var i = 0; i < nvoleon.length; i++) {
                document.getElementById("ciudad").options[i] = new Option(nvoleon[i]);
            }
        } else if (valueEst == 2) {
            for (var i = 0; i < slp.length; i++) {
                document.getElementById("ciudad").options[i] = new Option(slp[i]);
            }
        }
    } else {
        document.getElementById("ciudad").options.length = 0;
        document.getElementById("ciudad").options[0] = new Option("Model");
    }
}

function doorSet() {
    if (this.checked) {
        document.getElementById("twoDoor").checked = true;
    }
}

/*****************************/

/*function addNode() {
    var inText = document.getElementById("estado").value;
    var inText1 = document.getElementById("ciudad").value;

    var newText = document.createTextNode(inText);
    var newText1 = document.createTextNode(inText1);

    var newGraf = document.createElement("table");
    newGraf.appendChild(newText);
    newGraf.appendChild(newText1);

    var docBody = document.getElementsByTagName("body")[0];
    docBody.appendChild(newGraf);

    return false;
}*/

function myFunction() {
    var table = document.getElementById("myTable");

    var email= document.getElementById("emailAddr").value;
    var brand=document.getElementById("estado").value;
    var model=document.getElementById("ciudad").value;

    var row = table.insertRow(1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    cell1.innerHTML = email;
    cell2.innerHTML = model;
    cell3.innerHTML = brand;
}

还有我的 HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Formulario</title>
        <link rel="stylesheet" href="css/script06.css">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/bootstrap-3.2.0-dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/bootstrap-3.2.0-dist/css/bootstrap-theme.min.css">
        <!--No se te olvide el css-->
        <!--<link rel="stylesheet" href="css/bootstrap-3.2.0-dist/css/bootstrap.min.css">
        <link rel="stylesheet" href="css/bootstrap-3.2.0-dist/css/bootstrap-theme.min.css">-->
        <script src="js/script08.js"></script>
        <!--No se te olvide el js-->
    </head>

    <body>
        <header></header>
        <main>
            <article>
                <p>
                    <h1>Choose your car</h1>
                </p>
            </article>
            <form action="#">
                <p>
                    <label for="emailAddr">Email Address:
                        <input id="emailAddr" type="text" size="40" class="reqd email">
                    </label>
                </p>
                <p>
                    <label for="passwd1">Password:
                        <input type="password" id="passwd1" class="reqd">
                    </label>
                </p>
                <p>
                    <label for="passwd2">Repeat Pass:
                        <input type="password" id="passwd2" class="reqd passwd1">
                    </label>
                </p>
                <!--<p>
                <label for="color">Colors:
                <select id="color" class="reqd">
                <option value="" selected>Choose a color</option>
                <option value="Red">Red</option>
                <option value="Green">Green</option>
                <option value="Blue">Blue</option>
                </select> </label>
                </p>-->
                <p>
                    Options: <label for="sunroof">
                        <input type="checkbox" id="sunroof" value="Yes">
                        Sunroof (Two door only)</label>
                    <label for="pWindows">
                        <input type="checkbox" id="pWindows" value="Yes">
                        Power Windows</label>
                </p>
                <p>
                    Doors: <label for="DoorCt"><!--Doors:&nbsp;&nbsp;-->
                        <input type="radio" id="twoDoor" name="DoorCt" value="twoDoor" class="radio">
                        Two</label>
                        <label for="DoorCt">
                        <input type="radio" id="fourDoor" name="DoorCt" value="fourDoor" class="radio">
                        Four </label>
                </p>
                <p>
                    <label>Brand:</label>
                    <select id="estado" class="reqd">
                        <option value="">Brand</option>
                        <option value="0">Ford</option>
                        <option value="1">Chevrolet</option>
                        <option value="2">Volkswagen</option>
                    </select>
                    &nbsp;
                    <select id="ciudad" class="reqd">
                        <option>Model</option>
                    </select>
                </p>
                <p>
                    <input type="submit" value="Enviar" id="env">
                    &nbsp;
                    <input type="reset">
                </p>
            </form>

            <br />

            <!--Veamos si funciona-->
            <table id="myTable">
                <tr>
                    <td>Email</td>
                    <td>Model</td>
                    <td>ID Brand</td>
                </tr>
                <tr>
                </tr>
            </table>

        </main>
        <footer></footer>
    </body>
</html>

我尝试在 JavaScript 中添加额外的单元格:

cell4.innerHTML = <button onclick="myDeleteFunction()">Del</button>;

在哪里调用函数

function myDeleteFunction() {
    document.getElementById("myTable").deleteRow();
}

删除行，但没有成功。

我将不胜感激任何帮助。谢谢。

Answer 1

var node = nodes[0];
if (univArray[z].ownership != "public") {
    node.parentNode.removeChild(node)
}