时间戳

首页 > 解决方案 > 动态创建的表格行，输入字段未发布

javascript - 动态创建的表格行，输入字段未发布

问题描述

我有这个表格，里面有一个表格，我动态地将带有输入字段的行添加到表格中，但问题是当我提交表格时，我收到一个错误，说未定义的索引。这是代码：

HTML ` 

        <div class="row">
            <div class="col-md-12">
                <table id="myTable">
                    <th>
                        ID number
                    </th>
                    <th>
                        Lastname
                    </th>
                    <th>
                        Firstname
                    </th>
                    <th>
                        M.I.
                    </th>
                    <th>Course
                    </th>
                    <th>
                        Address
                    </th>
                    <th>
                        Contact number
                    </th>
                        <tr>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
    <div class="modal-footer">

        <input type="button" class="btn btn-default btn-sm" data-dismiss="modal" value="Cancel"/>
        <input type="submit" class="btn btn-primary btn-sm" id="btn_add_adv" name="btn_add_mul" value="Save"/>
    </div>
     </form>

` JAVASCRIPT 创建行

    function insertRow()
    {
        var table = document.getElementById('myTable');
        var len = table.rows.length;
        var row = table.insertRow(len);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        var cell5 = row.insertCell(4);
        var cell6 = row.insertCell(5);
        var cell7 = row.insertCell(6);

    var el1 = document.createElement("input");
    el1.type = "text";
    el1.name = "idnum[]";
    el1.size = "8";
    cell1.appendChild(el1);
    var el2 = document.createElement("input");
    el2.type = "text";
    el2.name = "lname[]";
    cell2.appendChild(el2);
    var el3 = document.createElement("input");
    el3.type = "text";
    el3.name = "fname[]";
    cell3.appendChild(el3);
    var el4 = document.createElement("input");
    el4.type = "text";
    el4.name = "mname[]";
    el4.size = "1";
    cell4.appendChild(el4);
    var el5 = document.createElement("input");
    el5.type = "text";
    el5.name = "course[]";
    el5.size = "5";
    cell5.appendChild(el5);
    var el6 = document.createElement("input");
    el6.type = "text";
    el6.name = "add[]";
    cell6.appendChild(el6);
    var el7 = document.createElement("input");
    el7.type = "text";
    el7.name = "contact[]";
    el7.size = "12";
    cell7.appendChild(el7);

}

PHP 从创建的输入字段中收集值

 <?php


    if(isset($_POST['btn_add_mul'])){
        $id = $_POST['idnum'];
        $lastname = $_POST['lname'];
        $firstname = $_POST['fname'];
        $midname = $_POST['mname'];
        $course = $_POST['course'];
        $address = $_POST['add'];
        $contact = $_POST['contact'];
        for($i = 0, $count = count($id); $i < $count; $i++ )
        {
            $id_num = $id[$i];
            $lname = $lastname[$i];
            $fname = $firstname[$i];
            $mname = $midname[$i];
            $cou = $course[$i];
            $add = $address[$i];
            $con = $contact[$i];

            mysql_query("insert into tblstudent(id,lname,fname,mname,contact,address,course)Values('$id','$lname','$fname','$mname','$con','$add','$course')") or die(mysql_error());
        }
    }
?>

我创建行的方式有问题吗？

标签： javascriptphphtml

解决方案

function insertRow()
    {
        var table = document.getElementById('myTable');
        var len = table.rows.length;
        var row = table.insertRow(len);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        var cell5 = row.insertCell(4);
        var cell6 = row.insertCell(5);
        var cell7 = row.insertCell(6);

    var el1 = document.createElement("input");
    el1.type = "text";
    el1.name = "idnum[]";
    el1.size = "8";
    cell1.appendChild(el1);
    var el2 = document.createElement("input");
    el2.type = "text";
    el2.name = "lname[]";
    cell2.appendChild(el2);
    var el3 = document.createElement("input");
    el3.type = "text";
    el3.name = "fname[]";
    cell3.appendChild(el3);
    var el4 = document.createElement("input");
    el4.type = "text";
    el4.name = "mname[]";
    el4.size = "1";
    cell4.appendChild(el4);
    var el5 = document.createElement("input");
    el5.type = "text";
    el5.name = "course[]";
    el5.size = "5";
    cell5.appendChild(el5);
    var el6 = document.createElement("input");
    el6.type = "text";
    el6.name = "add[]";
    cell6.appendChild(el6);
    var el7 = document.createElement("input");
    el7.type = "text";
    el7.name = "contact[]";
    el7.size = "12";
    cell7.appendChild(el7);

}
insertRow()
<form method="post">
    <div class="row">
            <div class="col-md-12">
                <table id="myTable">
                    <th>
                        ID number
                    </th>
                    <th>
                        Lastname
                    </th>
                    <th>
                        Firstname
                    </th>
                    <th>
                        M.I.
                    </th>
                    <th>Course
                    </th>
                    <th>
                        Address
                    </th>
                    <th>
                        Contact number
                    </th>
                        <tr>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

    </div>
    <div class="modal-footer">

        <input type="button" class="btn btn-default btn-sm" data-dismiss="modal" value="Cancel"/>
        <input type="submit" class="btn btn-primary btn-sm" id="btn_add_adv" name="btn_add_mul" value="Save"/>
    </div>
     </form>
     <?php if (isset($_POST['btn_add_mul'])) {
$id = $_POST['idnum'];
$lastname = $_POST['lname'];
$firstname = $_POST['fname'];
$midname = $_POST['mname'];
$course = $_POST['course'];
$address = $_POST['add'];
$contact = $_POST['contact'];
for ($i = 0, $count = count($id); $i < $count; $i++) {
    $id_num = $id[$i];
    $lname = $lastname[$i];
    $fname = $firstname[$i];
    $mname = $midname[$i];
    $cou = $course[$i];
    $add = $address[$i];
    $con = $contact[$i];

    mysql_query("insert into tblstudent(id,lname,fname,mname,contact,address,course)Values('$id','$lname','$fname','$mname','$con','$add','$course')") or die(mysql_error());
}
}?>

首先打开表单标签并将其方法设置为发布，您将看到数据以以下格式发布，您需要将 json_encode 数据插入 db 而不是直接数组中，它会引发错误。

Array
(
[idnum] => Array
    (
        [0] => sada
    )

[lname] => Array
    (
        [0] => sad
    )

[fname] => Array
    (
        [0] => Zsdad
    )

[mname] => Array
    (
        [0] => sdsad
    )

[course] => Array
    (
        [0] => sd
    )

[add] => Array
    (
        [0] => asda
    )

[contact] => Array
    (
        [0] => ada
    )

[btn_add_mul] => Save
)

推荐阅读