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

【问题标题】：Add data to table using onclick function in JavaScript使用 JavaScript 中的 onclick 函数将数据添加到表中
【发布时间】：2013-12-13 09:09:45
【问题描述】：

这是我的代码：

<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 页面上完成。我认为问题出在单页上，但我必须在一页上执行此操作。在这方面需要帮助。

【问题讨论】：

作为旁注 - 您的 html 中的“&nbsp”需要是“ ” （末尾有分号）

标签： javascript html css html-table add

【解决方案1】：

试试这个：

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

Fiddle

【讨论】：

OP 已经使用了 jQuery...$(rows).appendTo("#list tbody");
嘿，我试过了，它适用于小提琴，但在我的末端不起作用。这可能是我的 CSS 中的问题吗？
@user2631892，您在控制台中收到任何错误吗？还有：你有没有加载 jQuery 库？
不，我还没有加载它。我可以在不使用 JQuery 的情况下做到这一点吗？
@user2631892，当然，但您发布的代码中确实已经有 jQuery。 1分钟，我会更新。

【解决方案2】：

试试这个

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

【讨论】：