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表格

回答

相关问题