從json獲取動態表字段ID使用jquery

Question

我想獲得當前resourceId和roleId裏面的我的deleteResource()函數上刪除按鈕點擊，但我得到undefined。我做錯了什麼？

function DeleteResource(elem) { 
    var updatedBy = $("#userName").text(); 
    var url = document.URL; 
    currentProjId = decodeURI(/id=([^&]+)/.exec(url)[1]); 
    var resourceId = $('#' + elem).find(':nth-child(1)').attr('id'); 
    alert("resource id is" + resourceId +); 
    var roleId = $('#' + elem).find(':nth-child(2)').attr('id'); 
    alert("role is is" + roleId +); 
    } 

https://jsfiddle.net/vuxL6qvx/

Answer 1

var resourceList = [{ 
 
    "ResourceName": "john", 
 
    "ResourceID": "1", 
 
    "RoleId": "2", 
 
    "RoleName": "admin" 
 
}, 
 
{ 
 
    "ResourceName": "jute", 
 
    "ResourceID": "2", 
 
    "RoleId": "3", 
 
    "RoleName": "employee" 
 
}] 
 

 
$(document).ready(function() { 
 
    table() 
 
}); 
 
function table() { 
 
    for (i = 0 ; i < resourceList.length ; i++) { 
 
     var resourceTable = '<tr id="' + (i + 1) + '"><td id="' + resourceList[i].ResourceID + '">' + resourceList[i].ResourceName + '</td><td class="RoleName" id="' + resourceList[i].RoleId + '">' + resourceList[i].RoleName + '</td><td><i class="fa fa-trash icon" id="dlt' + i + '" onclick="dltResource(this)"></i></td></tr>'; 
 

 
     $('#resourceTable').append(resourceTable) 
 
    } 
 
} 
 
function dltResource(control) { 
 
    //event.stopPropagation() 
 
    id = $(control).closest('tr').attr('id'); 
 
    confirmDialog("Are you sure do you want to delete this Resource?", function() { 
 
     DeleteResource(id) 
 
    }); 
 
} 
 
function DeleteResource(elem) { 
 
    var updatedBy = $("#userName").text(); 
 
    var url = document.URL; 
 
    //currentProjId = decodeURI(/id=([^&]+)/.exec(url)[1]); 
 
    var resourceId = $('.projectResourceTable #' + elem + ' td:nth-child(1)').attr('id'); 
 
    alert("resource id is" + resourceId); 
 
    var roleId = $('.projectResourceTable #' + elem + ' td:nth-child(2)').attr('id'); 
 
    alert("role is is" + roleId); 
 
} 
 

 
function confirmDialog(message, onConfirm) { 
 
    var fClose = function() { 
 
     modal.modal("hide"); 
 
    }; 
 
    var modal = $("#deleteProject,#deleteResource"); 
 
    modal.modal("show"); 
 
    $("#confirmMessage").empty().append(message); 
 
    $("#confirmOk").one('click', onConfirm); 
 
    $("#confirmOk").one('click', fClose); 
 
    $("#confirmCancel").one("click", fClose); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" /> 
 

 
<div class="modal" id="deleteResource"> 
 
     <div class="modal-dialog"> 
 
      <div class="modal-content"> 
 
       <div class="modal-body" id="confirmMessage"> 
 
       </div> 
 
       <div class="modal-footer"> 
 
        <button type="button" class="btn btn-default" id="confirmOk">Ok</button> 
 
        <button type="button" class="btn btn-default" id="confirmCancel">Cancel</button> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <table class="table table-bordered table-responsive projectResourceTable"> 
 
     <thead class="colorBlue"> 
 
      <tr> 
 
       <td>Resources</td> 
 
       <td>Roles</td> 
 
       <td>Action</td> 
 
      </tr> 
 
     </thead> 
 
     <tbody id="resourceTable"></tbody> 
 
    </table>

，你需要在它之前指定表.projectResourceTable的類名。 由於您的表中有多個具有相同ID的對象。

Answer 2

我updated your fiddle，改變了以下內容：

1. 刪除了onClick="..."

2. 新增通過JS的onClick處理程序：

    $('.icon').on('click', function(){ 
         dltResource($(this).parent().parent()); 
        })