如何动态地从html表中的javascript数组中获取值

Question

我有一个应用程序，我在表中有一组数据，我将点击该表的行，然后将生成一个弹出窗口，数据将添加到该表下方的新表中。所以情况很简单。现在我的问题是我必须在下面的表上做两个操作，一个是删除而另一个是更新。现在问题是编辑和删除我必须将每行的id传递给另一个函数，其中我将进行相应的操作。所以问题是，当我点击上表的行将数据添加到下表时，例如假设上表中只有一行我添加了它现在我可以在下表中执行更新和删除操作。但是当我在上表中添加一行时将新行添加到下表中时，新插入的行的id正在替换旧的行在新表中。我正在显示我的代码我做了什么

for(var z=0; z<data.searchResultArray.length;z++){  


     searchResultArray = data.searchResultArray[z].split("$$##$$##");   


     createTable = createTable + "<tr><td>"+searchResultArray[0]+"</td><td>"+searchResultArray[1]+"</td><td>"+searchResultArray[2]+"</td><td>"+searchResultArray[3]+"</td><td>"+"<a href =#  onclick=deleteCandidate(searchResultArray[5],searchResultArray[6]);  target=\"_self\">"+"Delete"+"</a></td><td>"+"<a href =#  onclick=updatePresentCandidatePopUp(searchResultArray[5],searchResultArray[6]);  target=\"_self\">"+"Edit"+"</a></td></tr>";  

        $(".homeSearchResultOutside1").html(createTable+"</tbody></table>");
        alert(createTable)
        $('#mainTable1').dataTable({

            "scrollY":        300,
            "scrollCollapse": true,
            "jQueryUI":       true,
            "aaSorting": [],
            "iDisplayLength": 20, 
            "aLengthMenu": [[20, 50, 100, -1], [20, 50, 100, "All"]]
        });

    }   

所以searchResultArray [5]和searchResultArray [6]每次都在更新时插入新行，如何管理？

Answer 1

也许这会起作用，我仅基于我的假设修改了你的代码，但也许它可以作为你的起点。请注意，它有点在冗长的一面，但我选择了这样做以明确意图。

var rStart = "<tr><td>";
var rEnd = "</td></tr>";
var tdEnd = "</td><td>";
var splitString = "$$##$$##";

var cTableStart = "<table><tbody>";
var cTableEnd = "</tbody></table>";
var createTable = cTableStart;
var z = 0;
for (z = 0; z < data.searchResultArray.length; z++) {
    var searchArray = data.searchResultArray[z].split(splitString); // must assume 7 (0-6) split elements in string
    var rowItems = "\"" + searchArray[5] + "\",\"" + searchArray[6] + "\"";
    var rowDelete = "<a href =# onclick='deleteCandidate(" + rowItems + ")' target='_self'>Delete</a>";
    var rowUpdate = "<a href =# onclick='updatePresentCandidatePopUp(" + rowItems + ")' target='_self'>Edit</a>";
    var newRow = rStart + searchArray[0] + tdEnd + searchArray[1] + tdEnd + searchArray[2] + tdEnd + searchArray[3] + tdEnd + rowDelete + tdEnd + rowUpdate + rEnd;
    createTable = createTable + newRow;
}
createTable = createTable + cTableEnd;
$(".homeSearchResultOutside1 ").html(createTable);
//alert(createTable);

// We have no insight into the table #mainTable1 here - perhaps need to modify cTableStart above
//NOTE Datatables 1.9 & prior ONLY syntax: http://legacy.datatables.net/ref
$('#mainTable1').dataTable({
    "scrollY": 300,
        "scrollCollapse": true,
        "jQueryUI": true,
        "aaSorting": [],
        "iDisplayLength": 20,
        "aLengthMenu": [
        [20, 50, 100, -1],
        [20, 50, 100, "All"]
    ]
});