Question

我在表单中有一个html表。

此表填充了我的数据库中的信息。这就是表格的样子：

<table>
<tr> 
<td >Number</td>
<td >Name</td>
<td >Last Name</td>
</tr> 
<tr> 
<td> <input type="hidden" id="number" value="1">1</td>
<td> <input type="hidden" id="name" value="John">John</td>
<td> <input type="hidden" id="last" value="Snow">Snow</td>
</tr> 
<tr> 
<td> <input type="hidden" id="number" value="2">2</td>
<td> <input type="hidden" id="name" value="Jean">Jean</td>
<td> <input type="hidden" id="last" value="Dow">Dow</td>
</tr> 
.
.
</table>

表的行数取决于数据库引发的行数。

如果信息正确，用户将点击表单的提交按钮。

提交按钮将把它带到js文件中的一个函数。从那里，我需要获取表的值并将它们发送到php文件。

为了实现这一点，在函数内部，我正在做的js文件中：

var sNumber = $("# number ").val();
 var sName = $("#name").val();
  var sLast = $("#last").val();
   params = '';
    params += '&number='+sNumber;
    params += '&name='+sName;   
    params += '&last='+sLast;   
     theUrl = 'controller.php';
   $.ajax ({
        url: theUrl,
        data: params,
        async:false,
        success: function (data, textStatus)
        {              
        }
    });

但是由于表中行的ID是相同的，我只得到第一行的信息。

任何人都可以帮我把表格中的所有信息发送到php文件吗？

非常感谢

Answer 1

id在页面上必须是唯一的。使用class代替id

如果您的网页中没有更多双重ID，请查看jQuery each()功能，以便在您的ajax调用中获取所有必需的数据

Answer 2

使用class并执行：

var listName = [];
$(".name").each(function(){
    listNames.push($(this).val());
    alert($(this).val());
})

Answer 3

元素的

id属性必须是唯一的。使用课程。使用jQuery查看与类匹配的集合。

您可以在GET和POST中多次发送相同的变量。

params = '';
$(".name").each(function(){
  var sName = $(this).val();
  params += '&name='+sName;   
});
//similar for number and last

theUrl = 'controller.php';
$.ajax ({
        url: theUrl,
        data: params,
        async:false,
        success: function (data, textStatus)
        {              
        }
    });

Answer 4

Ids永远不应该是相同的。每个ID应该只有一个给定项目的项目。也就是说，如果你想拥有具有相似功能的项目，你应该使用类。也就是说，您可能还希望包含name属性。

如果你真的想使用ID，你应该更像

<table id="users">
<tr> 
<td >Number</td>
<td >Name</td>
<td >Last Name</td>
</tr> 
<tr class="someclass"> 
<td> <input type="hidden" name="number" id="number-1" value="1">1</td>
<td> <input type="hidden" name="name" id="name-1" value="John">John</td>
<td> <input type="hidden" name="last" id="last-1" value="Snow">Snow</td>
</tr> 
<tr class="someclass"> 
<td> <input type="hidden" name="number" id="number-2" value="2">2</td>
<td> <input type="hidden" name="name" id="name-2" value="Jean">Jean</td>
<td> <input type="hidden" name="last" id="last-2" value="Dow">Dow</td>
</tr> 
.
.
</table>

和javascript应该像

//get the table and iterate over every row
$('table').find('.someclass').each(function(){
  //get each inputs name and value
  var somevar = $(this)
  var number = somevar.find('[name=number]').val()
  var name = somevar.find('[name=name]').val()
  var last = somevar.find('[name=last]').val()
  //Do something with these
});

您可以做的其他一些事情就是简单地使用jQuery.post()。所以在提交时你会做

//serialze the form and submit it. 
$.post("controller.php", $('form').serialize(),
   function(data) {
     //handle the response
     alert("Data Loaded: " + data);
   }
);

为此，您需要使用number[]，name[]和last[]作为输入名称，以便将它们存储为数组。

Jquery ajax，发送具有相同id的多行信息

4 个答案: