javascript - 遍历行以获取动态生成的输入值

Question

我正在为这段代码使用 PHP、JSP 和 JSON。我必须获取文本框的值，以便将它们插入到我的数据库中。

我有一个包含 sibling 信息的表格，当然我们有不同数量的 sibling ，所以我创建了一个表格，在单击按钮时动态添加带有文本框的行和列。

这是表格的 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>

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

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'];
    }
?>