使用jQuery更新表格

在服务器端，我每3秒发出一次数据库的最后10行;使用jQuery更新表格

setInterval(function() { 
       connection.query("SELECT * FROM report ORDER BY id DESC limit 10", function(err, rows) { 
       if (err) console.log(err); 
       else { 
        console.log("Last 10 record emitted."); 
       // console.log("rows: " + JSON.stringify(rows, null, 3)); 
        io.emit("last_list", rows) 
       } 
       }); 
      }, 3000);

在客户端，我追加这些行表;

socket.on('last_list', function(rows) { 
    for (var i = 0; i < rows.length; i++) { 
     var row = rows[i]; 

     $('#myTable').append('<tr><td>' + row.id + '</td><td>' + row.fabrika + '</td><td>' + 
     row.kumes + '</td><td>' + row.makina + '</td><td>' + row.kat + '</td><td>' + 
     row.sol_sag + '</td><td style="color: rgba(25, 44, 44, 1); font-weight: bolder;">' + 
     row.adet + '</td></tr>'); 

    } 
    });

我的问题是，我怎么能更新表，而不是每3秒添加新的行？

来源

2017-08-13 ilvthsgm

什么是添加新行和更新表之间的区别？ –

这是否意味着您要清除表并重新加载整个数据？ – Imran

@ user1041953这正是我想要实现的。 – ilvthsgm

每次追加前都清除表体。你可以给你的tbody一个ID并清除它，像$（“＃tbody”）。html（“”），或者你可以用下面的方法。

socket.on('last_list', function(rows) { 
$('#myTable tbody').html(""); 
for (var i = 0; i < rows.length; i++) { 
    var row = rows[i]; 



    $('#myTable').append('<tr><td>' + row.id + '</td><td>' + row.fabrika + '</td><td>' + 
    row.kumes + '</td><td>' + row.makina + '</td><td>' + row.kat + '</td><td>' + 
    row.sol_sag + '</td><td style="color: rgba(25, 44, 44, 1); font-weight: bolder;">' + 
    row.adet + '</td></tr>'); 

}

}）;

来源

2017-08-13 12:16:39 Imran

将数据保存在数组中。每次新数据都会附加到数组中，并使用更新的数据集重新渲染数组。像这样：

var data = [] 
var tableContainer = $('#myTable') 

function renderTable() { 
    tableContainer.innerHTML = data.map(function(row) { 
    return '<tr><td>' + row.id + '</td><td>' + row.fabrika + '</td><td>' + 
     row.kumes + '</td><td>' + row.makina + '</td><td>' + row.kat + '</td><td>' + 
     row.sol_sag + '</td><td style="color: rgba(25, 44, 44, 1); font-weight: bolder;">' + 
     row.adet + '</td></tr>' 
    }).join('') 
} 

function updateData(newData) { 
    newData.forEach(function(item) { 
    data.push(item) 
    }) 
} 

socket.on('last_list', function(rows) { 
    updateData(rows) 
    renderTable() 
});

来源

2017-08-13 12:16:20 lukaleli

$('#myTable').empty();

上面所列内容只需添加为你的回调函数，即第一行：

socket.on('last_list', function(rows) { 
    $('#myTable').empty(); 
    //REST OF YOUR CODE AS IS HERE... 
});

FYI：只是为了更好的性能，不改变与每一个循环的DOM。相反，请将行添加到变量中，并在循环后将其分配给您的表。 DOM操作比变量要昂贵。

来源

2017-08-13 12:21:54 iMatoria

您可以使用$().empty以清除table的内容，然后使用$().append或$().html把HTML内容。

也可以使用template string，即backticks来更方便地创建mutliline html内容，而不是使用字符串并连接每个变量。

function generateTable(row) { 
 

 
    return ` 
 
     <tr> 
 
     <td>${row.id}</td> 
 
     <td>${row.fabrika}</td> 
 
     <td>${row.kumes}</td> 
 
     <td>${row.makina}</td> 
 
     <td>${row.kat}</td> 
 
     <td>${row.sol_sag}</td> 
 
     <td style="color: rgba(25, 44, 44, 1); font-weight: bolder;">${row.adet}</td> 
 
     </tr> 
 
    ` 
 
} 
 

 
var rows = [{ 
 
    id: '1', 
 
    fabrika: '2', 
 
    kumes: '3', 
 
    makina: '4', 
 
    kat: '5', 
 
    sol_sag: '6', 
 
    adet: '7' 
 
}, { 
 
    id: '2', 
 
    fabrika: '3', 
 
    kumes: '4', 
 
    makina: '5', 
 
    kat: '6', 
 
    sol_sag: '7', 
 
    adet: '8' 
 
}] 
 

 
setTimeout(() => { 
 
    $('table').empty(); 
 
    $('table').append(generateTable(rows[0])); 
 
}, 1000) 
 

 
setTimeout(() => { 
 
    $('table').empty(); 
 
    $('table').append(generateTable(rows[1])); 
 
}, 1000)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<table> 
 
</table>

来源

2017-08-13 12:27:11

使用jQuery更新表格

回答

相关问题