Question

我的表中有两列，动态创建行。

<table id ="datatable">
  <tr> 
    <td> 
      <input type ="text"> 
    </td>
    <td> 
      <input type ="text"> 
    </td> 
  </tr>
</table>

对于每一行，我想获取每个表的值并将它们插入到对象中，如下所示。

var reading= new Object();
reading.Name = (column1).value
reading.Value = (column2).value

我该怎么做？

Answer 1

//fetching lines
$('table tr').each(function(){
  var reading = new Object();

  reading.name = $(this).find('td:first input').val();
  reading.value= $(this).find('td:last  input').val();

});

已更新：如果为空则设置错误消息

$('table tr').each(function(){
  var reading = new Object();

  name = $(this).find('td:first');
  reading.name = name.find('>input').val();
  if(reading.name == '')
  {
    name.append('<span>field empty</span>');
  }

  value = $(this).find('td:last');
  reading.value = value.find('>input').val();
  if(reading.value == '')
  {
    value.append('<span>field empty</span>');
  }

});

Answer 2

您可以使用一个选择器来获取表格单元格中的所有输入类型，然后使用each function遍历每个输入类型：

// Get the selector.
var selector = $("#datatable tr td input[type='text']");

// Create the object.
var reading = {};

// Cycle through the inputs, attaching the properties.
selector.each(function (index, element) {
    // If index is 0, then set the name property.
    if (index === 0) reading.Name = $(this).val();

    // If index is 1, set the value property.
    if (index === 1) reading.Value = $(this).val();
});

注意，选择器不必如此精确。在这种情况下，一个简单的选择器（如#datatabe input）也可以工作（假设所有输入类型都是文本字段）。

至于代码，它严重依赖于输入的位置值，这不是一件好事，因为布局很容易改变。相反，您可能希望使用name或id属性或自定义数据属性（前缀为“data-”，这是HTML 5添加属性来输入您的输入类型，但对4.01 strict有效），像这样：

<table id ="datatable">            
  <tr>             
    <td>             
      <input name="Name" type ="text">             
    </td>            
    <td>             
      <input name="Value" type ="text">             
    </td>             
  </tr>            
</table>

然后，您可以将代码更改为更灵活，从属性值中获取属性名称，如下所示：

// Get the selector.
var selector = $("#datatable tr td input[type='text']");

// Create the object.
var reading = {};

// Cycle through the inputs, attaching the properties.
selector.each(function (index, element) {
    // Get the selector for the element.
    var thisSelector = $(this);

    // Set the value accoding to the name on the element.
    reading[thisSelector.attr("name")] = thisSelector.val();
});

这样，您可以添加/删除属性，而不必更改代码，因为它从元素的属性中读取。

每列读取表值

2 个答案: