Question

这是我的代码：

<body>
<h2>Add/Update Person Form</h2>
<div id = "data">
    <form id = "person">    
        <br><br>
        Name: <input id = "name" name = "name" type = "text">
        <br><br>
        Gender: <input name = "gender" type = "radio" value = "Male"> Male
                <input name = "gender" type = "radio" value = "Female"> Female
        <br><br>
        Age: &nbsp;&nbsp;&nbsp; <input id = "age" name = "age" type = "text">
        <br><br>
        City: &nbsp;&nbsp;&nbsp;<select id = "city" name = "city">
                <option>Lahore</option>
                <option>Islamabad</option>
                <option>Karachi</option>
            </select>
        <br><br>
        <input id = "button" type = "button" value = " Reset " onclick = "ResetForm()">&nbsp;&nbsp;&nbsp;
        <input id = "button" type = "button" value = " Add " onclick = "AddData()">
        <input id = "button" type = "button" value = " Update ">
    </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>Gender</td>
                    <td>Age</td>
                    <td>City</td>
                    <td>Action</td>
                </tr>
            </thead>

            <tbody>

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

以下是JAVASCRIPT的代码：

<script>
    function AddData(){
        var x = document.getElementById("age").value;
        var y = document.getElementById("name").value;
        var letters = '/^[a-zA-Z]+$/'; 
        if((parseInt(x)!=(x))&&(y==parseInt(y))){
            alert("Wrong Value Entered");
        }
        else{
            var rows = "";
            var name = document.getElementById("gender").value;
            var gender = document.getElementById("gender").value;
            var age = document.getElementById("age").value;
            var city = document.getElementById("city").value;   

            rows += "<tr><td>" + name + "</td><td>" + gender + "</td><td>" + age + "</td><td>" + city + "</td></tr>";
            $(rows).appendTo("#list tbody");
        }   
    }

    function ResetForm(){
        document.getElementById("person").reset();
    }
</script>

现在我要做的是这段代码中有三个按钮。添加，重置，更新。我正在努力立即添加重置工作。我已经编写了上面的代码来添加数据，但是当我单击添加时，数据不会添加到表体中。我正在使用onclick函数来添加数据。所有这些工作都在一个HTML页面上完成。我认为问题是因为单页，但我必须在一个页面上执行此操作。需要帮助。

Answer 1

试试这个

HTML

<body>
<h2>Add/Update Person Form</h2>
<div id = "data">
    <form id = "person">    
        <br><br>
        Name: <input id = "name" name = "name" type = "text">
        <br><br>
        Gender: <input class="gender" name = "gender" type = "radio" value = "Male"> Male
                <input class="gender" name = "gender" type = "radio" value = "Female"> Female
        <br><br>
        Age: &nbsp&nbsp&nbsp <input id = "age" name = "age" type = "text">
        <br><br>
        City: &nbsp&nbsp&nbsp<select id = "city" name = "city">
                <option>Lahore</option>
                <option>Islamabad</option>
                <option>Karachi</option>
            </select>
        <br><br>
        <input id = "button" type = "button" value = " Reset " onclick = "ResetForm()">&nbsp&nbsp&nbsp
        <input id = "button" type = "button" value = " Add " onclick = "AddData()">
        <input id = "button" type = "button" value = " Update ">
    </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>Gender</td>
                    <td>Age</td>
                    <td>City</td>
                    <td>Action</td>
                </tr>
            </thead>

            <tbody>

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

脚本

function AddData(){
        var x = document.getElementById("age").value;
        var y = document.getElementById("name").value;
        var letters = '/^[a-zA-Z]+$/'; 
        if((parseInt(x)!=(x))&&(y==parseInt(y))){
            alert("Wrong Value Entered");
        }
        else{
            var rows = "";
            var name = document.getElementById("name").value;
            var gender =document.querySelector('.gender:checked').value;
            var age = document.getElementById("age").value;
            var city = document.getElementById("city").value;   

            rows += "<tr><td>" + name + "</td><td>" + gender + "</td><td>" + age + "</td><td>" + city + "</td></tr>";
            $(rows).appendTo("#list tbody");
        }   
    }

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

DEMO

Answer 2

试试这个：

function AddData() {
    var x = document.getElementById("age").value;
    var y = document.getElementById("name").value;
    var letters = '/^[a-zA-Z]+$/';
    if ((parseInt(x) != (x)) && (y == parseInt(y))) {
        alert("Wrong Value Entered");
    } else {
        var rows = "";
        var name = "sadcsad";
        var gender = $('input[name="gender"]:checked').val();
        var age = document.getElementById("age").value;
        var city = document.getElementById("city").value;

        rows += "<tr><td>" + name + "</td><td>" + gender + "</td><td>" + age + "</td><td>" + city + "</td></tr>";
        $(rows).appendTo("#list tbody");
    }
}

我纠正了什么：

要检索<input>值，您需要javascript的.value或jQuery的.val()
在您正在寻找var gender = document.getElementById("gender").innerHTML;的函数中，但没有输入该ID，您应该使用name
请注意，您必须拥有唯一的ID，所以在我的小提琴中，我将您的按钮更正为class="button"。

Fiddle

使用普通javascript解决方案：

function AddData() {
    var x = document.getElementById("age").value;
    var y = document.getElementById("name").value;
    var letters = '/^[a-zA-Z]+$/';
    if ((parseInt(x) != (x)) && (y == parseInt(y))) {
        alert("Wrong Value Entered");
    } else {
        var rows = "";
        var name = "sadcsad";
        var gender = document.querySelector('input[name="gender"]:checked');
        gender = gender ? gender.value : '';
        var age = document.getElementById("age").value;
        var city = document.getElementById("city").value;

        rows += "<td>" + name + "</td><td>" + gender + "</td><td>" + age + "</td><td>" + city + "</td>";
        var tbody = document.querySelector("#list tbody");
        var tr = document.createElement("tr");

        tr.innerHTML = rows;
        tbody.appendChild(tr)

        //
    }
}

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

使用JavaScript中的onclick函数将数据添加到表中

2 个答案:

Fiddle

Fiddle