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

Loop through rows to get value of dynamically generated inputs

本文关键字：输入 动态 获取 遍历      更新时间：2023-09-26

我使用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();

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

有人吗？请帮忙！非常感谢。

这就是我通常处理这种类型的动态生成的输入行的方式。我从表单开始，将所有输入命名为一个多维数组，其中包含一个索引（以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'];
    }
?>

它不应该是这样的吗：

for(x=0, y=1; x<4; x++){
    arrSiblings[x] = $("#txtSib" + y + x).val();
}

$("#txtSib10").val()

ID是唯一的：https://developer.mozilla.org/en-US/docs/Web/API/element.id

ID在文档中必须是唯一的，并且通常用于使用getElementById检索元素。

将生成标记的脚本更改为使用类名，然后在循环中获取每个生成的文本框的值。

由于您正在构建的对象包含姓名、年龄、电话号码和职业的数据，我建议在每一行中添加一个类名，并在其上循环，然后构建JSON:

$('.sib-row').each(function() {
  $_siblingsInfo = '{":RELATIONSHIP":"'+"Siblings"+'",":NAME":"'+$(this).find(".name").val()+'",":AGE":"'+$(this).find(".age").val()+'",":TEL_NO":"'+$(this).find(".telno").val()+'",":OCCUPATION":"'+$(this).find(".occupation").val()+'"}';
});

指定一个可用于每行中文本字段的类名，以便在对它们进行循环时可以使用相同的代码：

<table id="tbSibling">
  <th>Name</th>
  <th>Age</th>
  <th>Gender</th>
  <th>Occupation and Employer</th>
  <tr class="sib-row">
    <td><input type="text" class="name" /></td>
    <td><input type="text" class="age" /></td>
    <td><input type="text" class="telno" /></td>
    <td><input type="text" class="occupation" /></td>
  </tr>
  <tr>
    <td id="btnAdd" class="button-add" onclick="insertSibRow();">Add</td>
  </tr>
</table>
相关文章：