1

を生成する関数があり<tr>、このそれぞれに対して、JSON として取得されたデータベース値とともにボタンtableがあります。Updateこれは、 自動的に生成されたこれtrを使用してテーブルに追加されます。 最初に、それぞれのタグを使用して新しいエントリが表示され、後でボタンを使用して更新できます - コードは次のとおりです -$("#RawMatTable").html(RawMat);tableinputtdUpdate

function GetRawMaterial() {

     var id = $('#UsrSelectedBprNo').val();
          $.ajax({
              type: "POST",
              url: "http://XXXXXXXXXX:XXXX/XXXXX.svc/XXXXX/" + id,
              data: "{}",
              contentType: "application/json",
              dataType:"json", 
              success:  function (msg) {                    
                   var RawMat = '';                               
                   $.each(msg, function(i,v){
                   RawMat += "<tr><td>" + "" + "</td><td>" + v.RM_Name + "</td><td id='sapCode"+i+"'>" + v.RM_SAP_Code + "</td><td>" + v.Unit+ "</td><td>" + v.Std_Qty + "</td><td>" + v.Allowable_Range + "</td><td>" + "<input type='text' id='actqty"+i+"'/>" + "</td><td>" + "<input type='text' id=''/>" + "</td><td>" + "<input type='text' id=''/>" + "</td><td>" + "<input type='text' id=''/>" + "</td><td>" + "<button id="+i+">Update</button>" + "</td></tr>";                       

                   $("#RawMatTable").html(RawMat);

                   $('button').click(function() {                               
                   var attrValue = $(this).attr('id'); 

                   alert (attrValue);
                   });                                         
                   });

これが完了すると..つまり行が生成されたら、これらのタグ内の値を次の関数で入力として使用する必要があります。これらの値は、SQL クエリのキーとして機能します。たとえば、「v.RM_SAP_Code」の値は参照として機能し、次の関数は次のとおりです

  function UpdateRawMaterial() {
             $.ajax({
                 type: "PUT",
                 url: "http://XXXX.XXX.XXX/DRLServiceHost/BPRService.svc/UpdateRawMat/ " + BPRNo + "/" + SAP_Code + "/" + Act_Qty + "/" + In_House_Batch + "/" + Equip_Id + "/" + RM_Remark,
                 data: "{}",
                 contentType: "application/json; charset=utf-8",
                 dataType: "json",
                 success: function (result, txtstatus) {
                     alert(txtstatus);
                    },
                 error: function (result) {
                     alert("jQuery Error:" + result.statusText);
                 }
             });
         };

ここでの私の質問は、ボタンクリックで動的に生成された HTML タグの値を読み取る方法です - 同じ行にありますか? より明確に、行の「更新」ボタンのクリックは、同じ行内の HTML タグの値を与える必要があります。

これまでのところ、クリックされたボタンの id 値しか取得できず、他の値を読み取る方法がわかりません。

これをさらに詳しく説明する必要がある場合は、親切にお知らせください....

4

2 に答える 2

0

ボタン クリック ハンドラー内に入ったら、jQuery DOM Traversalメソッドを使用して、その行の他の要素にアクセスします。効率化のために、最後に html を 1 回だけ設定する必要があります。on () を使用して、ボタンごとに 1 つではなく 1 つのハンドラーのみを登録できます。

var RawMat = '';

$.each(msg, function(i,v)
{
    RawMat += "<tr><td>" + "" + "</td><td>" + v.RM_Name + "</td><td id='sapCode"+i+"'>" + v.RM_SAP_Code + "</td><td>" + v.Unit+ "</td><td>" + v.Std_Qty + "</td><td>" + v.Allowable_Range + "</td><td>" + "<input type='text' id='actqty"+i+"'/>" + "</td><td>" + "<input type='text' id=''/>" + "</td><td>" + "<input type='text' id=''/>" + "</td><td>" + "<input type='text' id=''/>" + "</td><td>" + "<button id="+i+">Update</button>" + "</td></tr>";
});

var $html = $(RawMat);

$html.on('click', 'button', function()
{
    // cache jquery object
    var $this = $(this);

    // alert id
    alert($this.attr('id'));

    // get the tr parent
    var $tr = $this.closest('tr');

    // alert 'RM_Name'
    $tr.find('td:nth-child(2)').text();
});

$("#RawMatTable").html($html);
于 2013-07-22T11:35:02.647 に答える