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選擇「集合」中的項目（例如表格中的單元格）

回答

相關問題