jQuery选择“集合”中的项目（例如表格中的单元格）

我有一个HTML表格，其中包含用于批量编辑的输入元素。我在下面构建了一个skelton html示例。有人可以帮我弄清楚如何做下列事情：jQuery选择“集合”中的项目（例如表格中的单元格）

为每个“数量”字段添加一个选择器，例如： .change（）
获取数量和金额字段中的值，例如.val（）
更新Total字段，例如.text（）

主要的挑战是在我的ASP.Net MVC应用程序中由我的View生成HTML，并且输入ID的命名约定是“objectName_indexNumber_propertName”。 MyObject_1_Quantity。

我只是做一个for-loop/.each（），然后做字符串manimpulation来获得id并且做我的魔法？有没有更好的办法？谢谢。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <script type="text/javascript" src="jquery-1.4.4.min.js"></script> 

    <script type="text/javascript"> 
     $(document).ready(function() { 
      // how do I select all of them? 
      $('#MyObject_1_Quantity').change(DoCalculation); 
     }); 

     function DoCalculation() { 
      alert("what should I do here? I need to know the index/row I'm in, and which cell triggered me."); 

     } 
    </script> 

</head> 
<body> 

    <p>Test jquery Selector</p> 
    <table> 
     <tr> 
      <td>Row 1</td> 
      <td><input type="text" id="MyObject_1_Quantity" /></td> 
      <td><input type="text" id="MyObject_1_Rate" /></td> 
      <td><span id="MyObject_1_Total">$100.00</span></td> 
     </tr> 
     <tr> 
      <td>Row 2</td> 
      <td><input type="text" id="MyObject_2_Quantity" /></td> 
      <td><input type="text" id="MyObject_2_Rate" /></td> 
      <td><span id="MyObject_2_Total">$100.00</span></td> 
     </tr> 
     <tr> 
      <td>Row 3</td> 
      <td><input type="text" id="MyObject_3_Quantity" /></td> 
      <td><input type="text" id="MyObject_3_Rate" /></td> 
      <td><span id="MyObject_3_Total">$100.00</span></td> 
     </tr>    
    </table> 

</body> 
</html>

来源

2011-08-16 Raymond

这会在每行的第二个<td>处放置一个处理程序。然后在处理程序中将this作为输入，因此您可以获取嵌套输入和相邻单元格以进行计算，并将值设置为<span>。

例子：http://jsfiddle.net/Skjbv/1/

$(document).ready(function() { 
    $('table tr td:nth-child(2)').change(DoCalculation); 
}); 

function DoCalculation() { 
    var row = this.parentNode; 
    input1 = this.firstChild.value; 
    input2 = row.cells[2].firstChild.value; 
    span = row.cells[3].firstChild; 

    // convert to Number----v----------v 
    span.innerHTML = ('$' + (~~input1 * ~~input2).toFixed(2)); 
    // create string with 2 decimal places-----------^ 

}

如果它不是那么一致，你可以依靠第二小区，那么你可以改变DOM选择这个，直接放置在处理器上输入：

实施例：http://jsfiddle.net/Skjbv/3/

$(document).ready(function() { 
    $('table tr td input[id$="_Quantity"]').change(DoCalculation); 
}); 

function DoCalculation() { 
    var row = $(this).closest('tr'); 
    input1 = this.value; 
    input2 = row.find('input[id$="_Rate"]').val(); 
    span = row.find('span[id$="_Total"]'); 

    span.html('$' + (~~input1 * ~~input2).toFixed(2)); 
}

这些使用attribute-ends-with-selector^[docs]在ID属性的末尾选择具有适当值的元素。

来源

2011-08-16 22:38:32 user113716

这绝对是一个很好的起点/想法......但是，我并不是真的想依靠表中的元素位置。首先，列顺序可以（并将改变）。其次，我不能保证行号与id索引号相同（或线性映射）。例如该表可能包含插入行的子总计，等我想知道是否字符串解析，以获得ID出去的路呢？... – Raymond

@Raymond：我会在一分钟内更新我的第二个解决方案，使它对结构变化更具弹性。 – user113716

@Raymond：更新。现在它完全依赖于ID的结尾，从相关的''中选择。 – user113716

jQuery选择“集合”中的项目（例如表格中的单元格）

回答

相关问题