jquery函數將行添加到兩個不同的HTML表格

我有兩個具有不同表ID的HTML表，當我向表中添加行時，他們總是被添加到'排行榜'表中。我如何區分功能leaderSuccess應該寫入'排行榜'表和函數titalSucess應該寫入'titaltown'表？jquery函數將行添加到兩個不同的HTML表格

============JQUERY=========== 
function leaderSuccess(results) { 
    var numItemsRead = results.length; 
    var $tableBody = $('<tbody></tbody>');   
    for (var i = 0 ; i < results.length ; i++) { 
     var leaderboard = results[i]; 
     var $row = $('<tr></tr>');      
     $row.append($('<td></td>').text(leaderboard.owner)); 
     $row.append($('<td></td>').text(leaderboard.points)); 
     $tableBody.append($row);      

    } 

    $('thead').after($tableBody);      


} 



function titalSuccess(results) { 
    var numItemsRead = results.length;  
    var $tableBody = $('<tbody></tbody>');   
    for (var i = 0 ; i < results.length ; i++) { 
     var titals = results[i]; 
     var $row = $('<tr></tr>');      
     $row.append($('<td></td>').text(titals.owner)); 
     $row.append($('<td></td>').text(titals.titals)); 
     $tableBody.append($row);      
    } 

    $('thead').after($tableBody);      



=========HTML============ 
<table id="leaderboard"> 
    <thead><tr><th>Owner</th><th>Points</th></tr></thead> 
    <tbody></tbody> 
</table> 

<table id="titletown"> 
    <thead><tr><th>Owner</th><th>Titals</th></tr></thead> 
    <tbody></tbody> 
</table>  

function leaderEventHandler(event) { 
     leaderBoard 
      .orderByDescending('points') 
      .read() 
      .then(leaderSuccess, failure); 
} 

function titalEventHandler(event) { 
     titals 
      .orderByDescending('titals') 
      .read() 
      .then(titalSuccess, failure); 
    }

來源

2016-04-08 dmdwild2016

我沒有看到任何與調用相應函數的表相關的事件。什麼觸發這些功能？ – DinoMyte

你爲什麼寫在已經存在的'tbody'元素中？不能簡單地追加行？ – isherwood

@isherwood這是一個很好的問題，不確定它是否有意或無意地更改現有的內容或將其從html部分中刪除 –

附加的HTML表

function leaderSuccess(results) { 
    var numItemsRead = results.length; 
    var $tableBody = $('<tbody></tbody>');   
    for (var i = 0 ; i < results.length ; i++) { 
     var leaderboard = results[i]; 
     var $row = $('<tr></tr>');      
     $row.append($('<td></td>').text(leaderboard.owner)); 
     $row.append($('<td></td>').text(leaderboard.points)); 
     $tableBody.append($row);      

    } 

    $('#leaderboard thead').after($tableBody); // append to id="leaderboard" table     

} 

function titalSuccess(results) { 
    var numItemsRead = results.length;  
    var $tableBody = $('<tbody></tbody>');   
    for (var i = 0 ; i < results.length ; i++) { 
     var titals = results[i]; 
     var $row = $('<tr></tr>');      
     $row.append($('<td></td>').text(titals.owner)); 
     $row.append($('<td></td>').text(titals.titals)); 
     $tableBody.append($row);      
    } 

    $('#titletown thead').after($tableBody); // append to id="titletown" table          
}

來源

2016-04-08 17:37:20

這看起來不錯，我想反正。排行榜表看起來不錯，但titaltown表是空的.. – dmdwild2016

你必須包括執行這些功能的代碼 –

我將兩個調用函數添加到了我的原始文章中。函數leaderEventHandler和titalEventHandler – dmdwild2016

目前尚不清楚其中的函數被調用時，只需指定的ID，但你可以通過一個ID爲第二個參數：

function leaderSuccess(results, tableId) { 
    ... 
    $('#' + tableId).find('tbody').append(...); 
}

來源

2016-04-08 17:43:34 isherwood

無法格式化我的代碼以使其看起來在註釋中可讀，但對每個函數的調用都來自click事件的另一個函數，其中表讀取並傳遞給leaderSuccess或titalSuccess，具體取決於點擊地點 – dmdwild2016

jquery函數將行添加到兩個不同的HTML表格

回答

相關問題