循环到表中并从列内的不同输入中获取值

Looping into a Table and getting values from different Inputs inside the Columns

本文关键字：输入 获取 循环      更新时间：2023-09-26

我有一个动态表，它可以有未定义的行数，每一行都有定义的列数，在每一列内，总是相同的输入/控件，如下所示：

<table id='UndefinedTable'>
 <tr>
  <td><input type='text'></td> <!-- DataBase: Table Column1 -->
  <td><input type='text'></td> <!-- DataBase: Table Column2 -->
  <td><input type='date'></td> <!-- DataBase: Table Column3 -->
  <td><textarea></textarea></td> <!-- DataBase: Table Column4 -->
 </tr>
 <tr>
  <td><input type='text'></td> <!-- DataBase: Table Column1 -->
  <td><input type='text'></td> <!-- DataBase: Table Column2 -->
  <td><input type='date'></td> <!-- DataBase: Table Column3 -->
  <td><textarea></textarea></td> <!-- DataBase: Table Column4 -->
 </tr>
 <!-- This table may have an undefined number of rows -->
</table>
此外，行

可以被擦除（我想出了一种循环的方法，通过为每一行提供数字值，tr1、tr2、tr3，但正如我所说，任何行都可以被用户擦除，也是一个非常肮脏的解决方案）。

我需要获取每个控件内的所有值/文本，并通过 ajax 将数据发送到 PHP 文件，以便插入每一行。

我一直在考虑一些方法来做到这一点，但问题是我不知道如何循环到表中并获取输入和文本区域的值。

您可以使用以下方法选择所有这些元素 

$("#UndefinedTable input, #UndefinedTable textarea") //or this...
$("#UndefinedTable").find("input, textarea") //...alternative version

并循环遍历它们：

$("#UndefinedTable input, #UndefinedTable textarea").each(function(){
   alert($(this).val());
});

如果你也想要一个纯粹的JavaScript方法，你可以给每个输入一个name属性，并动态地循环遍历它们，将值放入数组或JSon对象中，以便使用Ajax传递给你的服务器。

var inputs = document.getElementsByName('input');
var values = [];
for (var i = 0; i < inputs.length; i++) {
    values.push(inputs[i].value);
}

若要为文本框和文本区域命名，可以使用：

.setAttribute('name', 'input');

通过 AJAX 提交

var formDATA = {};
$("#UndefinedTable tr").each(function(k){
    var obj = {};
    $(this).find("input,textarea").each(function(i){
        obj["field"+i] = $(this).val();
    });
    formDATA["row"+k] = obj;
});
//console.log(formDATA);

如果将属性name添加到输入和文本区域，则可以更改以下行：

obj["field"+i] = $(this).val();

跟：

obj[$(this)] = $(this).val();

现在，您可以通过 $.ajax（） 发送formDATA data：

$.ajax({
    //...
    data : formDATA
    //...
})

提交类似表格：

首先，您必须更改您的 html，例如：

<form id="form1" action="/post.php" method="post">
    <table id='UndefinedTable'>
        <tr>
            <td><input type='text'></td> <!-- DataBase: Table Column1 -->
            <td><input type='text'></td> <!-- DataBase: Table Column2 -->
            <td><input type='date'></td> <!-- DataBase: Table Column3 -->
            <td><textarea></textarea></td> <!-- DataBase: Table Column4 -->
        </tr>
        <tr>
            <td><input type='text'></td> <!-- DataBase: Table Column1 -->
            <td><input type='text'></td> <!-- DataBase: Table Column2 -->
            <td><input type='date'></td> <!-- DataBase: Table Column3 -->
            <td><textarea></textarea></td> <!-- DataBase: Table Column4 -->
        </tr>
        <!-- This table may have an undefined number of rows -->
    </table>
    <input value="send" type="submit">
</form>

现在的JS：

$("#form1").on("submit.block",function(e){
    e.preventDerault();
});
$("#UndefinedTable tr").each(function(k){
    $(this).find("input,textarea").each(function(i){
        $(this).attr("name","row"+k+"[field"+i+"]");
    });
});
$("#form1").off("submit.block");

如果将表单发布到 PHP 文件并使用 var_dump($_POST) ，脚本 PRINT 一个数组，如下所示：

array (size=2)
  'row0' => 
    array (size=4)
      'field0' => string 'Field1' (length=6)
      'field1' => string 'field2' (length=6)
      'field2' => string '2015-01-14' (length=10)
      'field3' => string 'row1' (length=4)
  'row1' => 
    array (size=4)
      'field0' => string 'Field1' (length=6)
      'field1' => string 'field2' (length=6)
      'field2' => string '2015-01-23' (length=10)
      'field3' => string 'row2' (length=4)
相关文章：