循环遍历行以获取动态生成的输入的值

Question

我在这段代码中使用PHP,JSP和JSON.我必须得到我的文本框的值,以便我可以将它们插入到我的数据库中.

我有一个包含兄弟姐妹信息的表,当然我们有不同数量的兄弟姐妹,所以我创建了一个表,在按钮点击时动态添加带有文本框的行和列.

以下是表格的HTML代码:

<table id="tbSibling">
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
        <th>Occupation and Employer</th>
        <tr>
            <td><input type="text" id="txtSib10" /></td>
            <td><input type="text" id="txtSib11" /></td>
            <td><input type="text" id="txtSib12" /></td>
            <td><input type="text" id="txtSib13" /></td>
        </tr>
        <tr>
        <td id="btnAdd" class="button-add" onclick="insertSibRow();">Add</td>
            </tr>
        </table>

他编写的脚本动态地添加了带文本框的行和列:

<script type="text/javascript">
    //Dynamically create rows and columns for Table Id: tbSiblings
    function insertSibRow(){
        var table=document.getElementById("tbSibling");
        var lastRow=table.rows.length - 1;
        var row=table.insertRow(lastRow);

        for(var i=0; i<4; i++)
        {
            var cellName=row.insertCell(i);
            var input=document.createElement('input'); 
            input.type='text';
            input.id='txtSib' + lastRow + i ;
            cellName.appendChild(input);
        }
    }
</script>

我给每个输入一个id:

input.id='txtSib' + lastRow + i ;
//result: txtSib10, txtSib11, txtSib12, txtSib13

现在我需要获取每个值,以便我可以在PHP页面上传递它们并在数据库中插入每个值.

但它只获得第一行,我得到最后一行,所以我可以确定行数.并创建了一个数组,以便我可以从中推送值.

var lastRow=tblSiblings.rows.length;
var arrSiblings = new array();

for(x=0;x>lastRow;x++){
    arrSiblings[x] = $("#txtSib10").val();
}

现在我的问题是这一行:

arrSiblings[x] = $("#txtSib10").val();

如何从动态创建的行和列中获取文本框的每个值？

有人吗？请帮忙!非常感谢.

Answer 1

这就是我通常处理这种动态生成的输入行的方式.我从我的表单开始,将所有输入命名为单个多维数组,索引(从0开始)和它们代表的数据名称,在您的情况下类似于siblings[0][name]您的第一个输入:

HTML

<table id="tbSibling">
    <tbody>
    <tr>
        <td><input type="text" name="siblings[0][name]" /></td>
        <td><input type="text" name="siblings[0][age]" /></td>
        <td>
            <select name="siblings[0][gender]">
                <option>Male</option>
                <option>Female</option>
            </select>
        </td>
        <td><input type="text" name="siblings[0][occupation]" /></td>
    </tr>
    </tbody>
</table>
<button id="add-row" type="button">Add row</button>

现在要添加一个新行,我复制表中的最后一行并清除所有输入值并更新其name属性中的索引,如:

JS

$('#add-row').click(function(){
    var newRow = $('#tbSibling tbody tr').last().clone().appendTo($('#tbSibling tbody'));
    var newIndex  = newRow.index();
    newRow.find(':input').each(function(){
        $(this).val('');
        $(this).attr('name', $(this).attr('name').replace(/\d+/, newIndex));
    });
}); 

在你的情况下,看起来你正在使用ajax将数据发送到你的服务器所以我会使用这样的jQuery $.post():

$.post('myphpfile.php',$('#tbSibling :input').serialize());

现在,在PHP中,您可以将所有数据放在数组中,$_POST['siblings']然后就可以循环并存储在数据库中

PHP

<?php
    $siblings_data = isset($_POST['siblings']) ? $_POST['siblings'] : array();
    foreach($siblings_data as $sibling){
         $name = $sibling['name'];
         $age = $sibling['age'];
         $gender = $sibling['gender'];
         $occupation = $sibling['occupation'];
    }
?>