2015-08-24 26 views
0

我有一个应用程序,我在表中有一组数据,我将点击该表的一行,弹出窗口会生成数据被添加到该表下方的新表中。所以情况非常简单。现在我的问题是我必须对下表执行两个操作,一个是删除,另一个是更新。现在问题在于编辑和删除i必须将每行的id传递给另一个函数,在那里我将执行相应的操作。所以问题在于,当我点击上表中将数据添加到下表的行时,例如让我们说上表中只有一行,我已将它添加到下表中,现在我可以在下表中执行更新和删除操作。但是,当我从上表中添加另一行时,将新行添加到b elow表新插入的行的ID被替换新table.I旧的一个正在展示我的代码我做了什么如何在html表格中动态获取javascript数组中的值

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]中时更新当插入一个新的行时,如何管理? enter image description here

+0

'$()。html()'替换内容。尝试'$()。append()'将数据附加到现有内容。 –

+0

@J桑托斯没有给你,我需要整个表格形成,但每行将得到他们的ID只有更新的 – lucifer

+0

提供小提琴或演示页面。 @lucifer –

回答

0

也许这会起作用,我只是基于我的假设修改了你的代码,但也许它会作为你的起点。请注意,它有点冗长,但我选择这样做的目的是明确的。

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"] 
    ] 
}); 
相关问题