1

我正在为这段代码使用 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();

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

有人吗？请帮忙！多谢。

4

3 回答 3

5

这就是我通常处理这种动态生成的输入行的方式。我从我的表单开始，并将所有输入命名为单个多维数组，带有索引（从 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 将数据发送到您的服务器，所以我会$.post()像这样使用 jQuery：

$.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'];
    }
?>
于 2013-07-30T03:48:26.360 回答
1

不应该是这样的：

for(x=0, y=1; x<4; x++){
    arrSiblings[x] = $("#txtSib" + y + x).val();
}
于 2013-07-30T03:16:01.863 回答
0

$("#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>
于 2013-07-30T03:11:39.503 回答