这是我的代码,它的作用是从 firebase 数据库中检索数据并使用 javascript(加上一个小的 jquery 东西)将其显示在 HTML 表中
<table class="table" id="ex-table">
<thead>
<tr>
<th scope="col">Nom</th>
<th scope="col">Prénom</th>
<th scope="col">N° CIN</th>
<th scope="col">Tel</th>
<th scope="col">Position</th>
<th scope="col">Photo d'accident</th>
<th scope="col">Etat</th>
<th scope="col">Options</th>
</tr>
</thead>
<tbody>
<script>
var database = firebase.database();
database.ref('declaration').once('value', function(snapshot) {
if (snapshot.exists()) {
var content = '';
snapshot.forEach(function(data) {
var val = data.val();
content += '<tr>';
content += '<td>' + val.firstName + '</td>';
content += '<td>' + val.lastName + '</td>';
content += '<td>' + val.cin + '</td>';
content += '<td> 1234 </td>';
content += '<td> lng lat </td>';
content += '<td>' + val.photo + '</td>';
content += '<td>' + val.etat + '</td>';
content += '<td> ACTION BUTTON TO THESE VARIABLES IN THIS ROW </td>';
content += '</tr>';
});
$('#ex-table').append(content);
}
});
</script>
</tbody>
</table>
情况是我想放置一个操作按钮“onclick”来更新数据库中的一行。
您可以使用key
每条记录的 来获取特定的行 ID,将相同onclick
的操作传递给操作按钮。你可以试试这样的
<script>
function actionCb(e){
console.log('e',e.id)
}
</script>
<table class="table" id="ex-table">
<thead>
<tr>
<th scope="col">Nom</th>
<th scope="col">Prénom</th>
<th scope="col">N° CIN</th>
<th scope="col">Tel</th>
<th scope="col">Position</th>
<th scope="col">Photo d'accident</th>
<th scope="col">Etat</th>
<th scope="col">Options</th>
</tr>
</thead>
<tbody>
<script>
var database = firebase.database();
database.ref('declaration').once('value', function(snapshot) {
if (snapshot.exists()) {
var content = '';
var snapValues = snapshot.val()
var values = Object.keys(snapValues).map(function(key){ return {key, ...snapValues[key]}})
values.forEach(function(data) {
var val = data;
var fbKey = data.key
content += '<tr>';
content += '<td>' + val.firstName + '</td>';
content += '<td>' + val.lastName + '</td>';
content += '<td>' + val.cin + '</td>';
content += '<td> 1234 </td>';
content += '<td> lng lat </td>';
content += '<td>' + val.photo + '</td>';
content += '<td>' + val.etat + '</td>';
content += '<td> <button id="'+ fbKey+'" onclick="actionCb(this)">action</button> </td>';
content += '</tr>';
});
$('#ex-table').append(content);
}
});
</script>
</tbody>
</table>
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句