DataTableの行ごとに編集ボタンがあり、データを渡すことができません

Question

名前、コード、電子メール（ユーザーに表示されないID列）の3つの列を持つBranchesというDataTableがあります。元々は編集ボタンが上にあり、行をクリックした後でユーザーがボタンをクリックすると、フィールドが入力されたダイアログボックスが開き、編集できます。しかし、今度は、各行に独自の編集ボタンがあるように変更する必要があるため、最初に行をクリックする必要はありません。

これでDataTableの各行に[編集]ボタンが表示されましたが、インデックス番号以外にその特定の行のデータを渡すことはできません。コードの関連ブロックは（私が何かを逃した場合を除き、私が持っている場合は、私に教えてください）以下のとおりです。

var txtName2 = $("#txtName2"); //For Update 
var txtCode2 = $("#txtCode2"); 
var txtEmail2 = $("#txtEmail2"); 
var dialog; 
var tblBranch = $("#tblBranches"); 
var branchList; 
var selectedIndex; 

branchList = response.branches; 
var data = { "aaData": [] }; 

    $.each(response.branches, function (i, item) { 
     data.aaData.push({ 
      "id": item.id, 
      "name": item.name, 
      "code": item.code, 
      "email": item.email, 
      "action": "<button> class='btnUpdate' type='button' onClick='testUpdateButton(" + i + ")'</button>" 
     }); 
    }); 

function testUpdateButton(index, name, code, email) { 
    //alert(index); 
    selectedIndex = tblBranch.row(this).index(); 
    var selectedName = tblBranch.row(index).name; 
    var selectedCode = tblBranch.row(index).code; 
    var selectedEmail = tblBranch.row(index).email; 
    //alert(name); 
    onBtnUpdateClicked(index, name, code, email); 
    } 

function onBtnUpdateClicked(index, name, code, email) { 
    if (branchList != null && branchList.length > 0) { 
     var selectedItem = branchList[selectedIndex]; 
     txtName2.val(selectedItem.name); 
     txtCode2.val(selectedItem.code); 
     txtEmail2.val(selectedItem.email); 
     dialog = $("#dialog-form-update").dialog("open"); 
     } 
    } 

私は唯一の「i」はボタンではなく、名前、コードまたは電子メールで、インデックス番号を渡した場合testUpdateButtonのアラート（index）には、選択した行の正しいインデックス番号が表示されます。したがって、インデックス番号は取得できることを確認しますが、他の3つのカラムは表示されません（アラート（名前）は何も表示されません）。

だから私は、このようなようにボタンで4つのすべてのフィールドを渡して試してみた：

"action": "<button> class='btnUpdate' type='button' onClick='testUpdateButton(" + i + ", " + item.name + ", " + item.code + ", " + item.email + ")'</button>" 

が、それは私だけのエラー与える：私はページを閲覧するとき：「引数リストの後に行方不明）キャッチされないでSyntaxErrorを」クロム。私はブラケットがどこになければならないのか分からない。

基本的にはインデックス番号を取得できますが、対応する名前、コード、電子メールを取得するためには使用できません。

参考までに、これまでのソリューションに最も近い機能があります。これは、すべての行データを渡し、行自体をクリックするたびに入力フィールドが入力された編集ダイアログボックスを読み込みます。私はonBtnUpdateClicked関数を追加したにすぎませんでしたが、以前の "Click on row first"バージョンから変更されました。理想的ではありませんが、少なくともそれはすべきことをしました。

$("#tblBranches tbody").on('click', 'tr', function() { 
    selectedIndex = tblBranch.row(this).index(); 
    onBtnUpdateClicked(); 
}); 

ご協力いただきまして誠にありがとうございます。

Answer 1

行のインデックスを取得できるため、これを使用して他の値を取得できます。この

function testUpdateButton(index){ 
      //alert(index); 
     selectedIndex = index; 
     var name=$("table tr").eq(index).children('td').eq(1).text(); 
     var email=$("table tr").eq(index).children('td').eq(2).text(); 
     alert(name); 
     alert(email); 
     onBtnUpdateClicked(index, name, email); 
} 

これらの値を取得するwoorkingフィドルがhttps://jsfiddle.net/shoaibakhter/atpgdofh/19/あるようなものを試してみてください。これは完全な解決策ではありませんが、これは他の値を取得するのに役立ちます。これはonBtnUpdateClicked関数で渡すことができます。あなたのテーブル構造につき、あなたonBtnUpdateClickedこれがお手伝いします

function onBtnUpdateClicked(index, name, email) { 
    if (branchList != null && branchList.length > 0) { 
     var selectedItem = branchList[index]; 
     txtName2.val(name); 
     txtEmail2.val(email); 
     dialog = $("#dialog-form-update").dialog("open"); 
     } 
    } 

希望below-としてこれらの値を使用中などの機能を変更する必要があります。