jQuery「コレクション」の項目を選択します（たとえば、表のセル）

バッチ編集に使用する入力要素を持つHTML表があります。私は以下のスケルトンHTMLの例を構築しました。誰かが次のようなことをする方法を理解するのに手伝ってください：jQuery「コレクション」の項目を選択します（たとえば、表のセル）

"Quantity"フィールドのそれぞれにセレクタを追加してください。 .change（）
[数量]フィールドと[金額]フィールドに値を入力します。 .val（）
を更新します。 .text（）

主な課題は、ASP.Net MVCアプリケーションのビューで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

これにより、各行の2番目の<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-----------^ 

}

それはあなたが2番目のセルに頼ることができることはそれほど一貫していない場合、あなたはこれに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

これは間違いなく良い出発点です/アイデア...しかし、私は本当にテーブル内の要素の位置に頼りたくはありません。まず、列の順序は変更できます（変更されます）。第2に、行番号がidインデックス番号と同じ（または線形にマップされる）ことを保証することはできません。例えばテーブルには小計などの行が挿入されている可能性があります。IDを取得するために文字列解析を行う方法があるのだろうかと思っています... – Raymond

@Raymond：1分で2番目のソリューションを更新します構造変化に対してより弾力性があります。 – user113716

@Raymond：更新されました。今度はIDの終わりに完全に依存し、相対的な ''から選択されます。 – user113716

jQuery「コレクション」の項目を選択します（たとえば、表のセル）

答えて

関連する問題