Кнопка редактирования для каждой строки DataTable, не может передавать данные

Question

У меня есть 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"); 
     } 
    } 

Когда я только пройти в номер индекса «я» на кнопку, а не имя, код или адрес электронной почты , предупреждение (индекс) в testUpdateButton отображает правильный номер индекса выбранной строки, поэтому подтверждение его может получить номер индекса, но не остальные три столбца (предупреждение (имя) ничего не отображает).

Так что я попытался прохождения всех четырех полей на кнопку, как например:

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

но это только дает мне ошибку: «Uncaught SyntaxError: отсутствует) после списка аргументов», когда я осмотреть страницу в Хром. Я не вижу, где должна отсутствовать скобка.

В принципе, я могу получить номер индекса, но не могу использовать его для получения соответствующего имени, кода и электронной почты.

Для справки, вот функция, которая ближе всего к решению, которое у меня было ранее - это передало бы все данные строки и загрузило диалоговое окно редактирования с полями ввода, заполненными всякий раз, когда я щелкнул в любом месте самой строки. Он был изменен из предыдущей версии «Нажмите на строку первой», хотя я просто добавил функцию onBtnUpdateClicked. Не идеальный, но по крайней мере он сделал то, что должен.

$("#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"); 
     } 
    } 

Надеется, что это поможет.