通过行循环，以获得动态生成的输入值 [英] Loop through rows to get value of dynamically generated inputs

问题描述

我使用PHP，JSP和JSON此code。我要得到我的文本框的值，所以我可以将其插入到我的数据库。

I am using PHP, JSP and JSON for this code. I have to get values of my textboxes so I can insert them into my database.

我有拥有兄弟姐妹的信息，当然我们有那么我创建了一个动态添加行和上按一下按钮。

I have a table that holds a siblings information, of course we have differrent number of siblings so I created a table that dynamically adds row and columns with textboxes on button click.

下面是HTML $ C $下表：

Here is the HTML code for table:

<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>

和他的脚本，动态地添加行和列的文本框：

And he script that dynamically adds row and columns with textboxes:

<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是：

I give each input an id by:

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

现在我需要得到每个值，所以我可以把它们PHP页面，并在数据库中插入每个。

Now I need to get each value so I can pass them on PHP page and insert each on the database.

但只得到了第一排，我得到的最后一排，所以我能确定的行数。 并创建了一个数组，所以我可以只从它推值。

But it only gets the first row, I get the last row so I can determine the number of rows. and created an array so I can just push the values from it.

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

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

现在我的问题是这一行：

Now my problem is this line:

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

我怎样才能获得文本框的每一个值从一个动态创建的行和列??

How can I get each value of textbox from a dynamically created rows and columns??

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

Anyone?PLEASE HELP! THANKS A LOT.

推荐答案

这是我通常如何处理这种类型的输入动态生成的行。 我开始与我的形式和名称，我所有的输入作为一个单独的多维数组，索引（从0开始），他们重新present数据的名称，你的情况是这样兄弟姐妹[0] [名] 你的第一个输入：

This is how I normally handle this type of dynamically generated rows of inputs. I start with my form and name all my inputs as a single multi-dimensional array, with an index (starting with 0) and the name of the data they represent, in your case something like siblings[0][name] for your first input:

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属性，是这样的：

Now to add a new row, I duplicate the last one in the table and clear all the input values and update the index in their name attribute, something like:

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的 $后（）是这样的：

In your case it looks like you're using ajax to send the data to your server so I would use jQuery's $.post() like this:

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

现在在你的PHP，你将不得不在 $阵列中的所有数据_ POST ['兄弟姐妹'] ，您可以循环并存储在数据库中

Now in your PHP you would have all your data in an array under $_POST['siblings'] that you can loop and store in your database

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

这篇关于通过行循环，以获得动态生成的输入值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！