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

Answer 2

不应该是这样的：

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

Answer 3

$("#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>

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

3 个答案: