我只用 Json 在 div 中創建了一個表。
div 看起來像這樣：
<div id="datatable" class="datatable" data-mdb-hover="true"
data-mdb-border-color="dark"
data-mdb-full-pagination="true"
data-mdb-clickable-rows="true"
>
</div>
然后我創建表：
const columns = [
{label: 'ID', field: 'id'},
{label: 'Role', field: 'role'},
];
const asyncTable = new mdb.Datatable(
document.getElementById('datatable'),
{columns,},
{loading: true}
)
fetch('/api/roles')
.then((response) => response.json())
.then((data) => {
asyncTable.update(
{
rows: data.map((roles) => ({
...roles,
name: `${roles.id}`,
role: `${roles.name}`,
})),
},
{loading: false}
);
});
現在，如果我像這樣單擊 tr，我會嘗試將類更改為“活動”：
// function to select the row
const table = document.getElementById('datatable');
table.addEventListener('rowClick.mdb.datatable', (e) => {
const selected_item_id = e.row.id
//console.log(e);
//event.target._setClassNames("active");
event.target.querySelector("tbody tr").className = "active"
activeT.push(selected_item_id)
});
它正在作業，但僅在第一個 tr 中有效。如果我單擊第二個 tr，它會再次將“活動”添加到第一個 tr..
在瀏覽器控制臺中點擊 2 次后是這個。就像你可以在這里看到雙重活動：
<tr scope="row" data-mdb-index="0" class="activeactive"><td style="" class="" data-mdb-field="id" false="">18</td><td style="" class="" data-mdb-field="role" false="">Admin</td></tr>
也許任何人都可以幫助我！
uj5u.com熱心網友回復：
試試這個
<script>
$('tr').onclick(function (e) {
$(this).toggleClass('active');
})
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/471408.html
標籤：javascript html jQuery json