溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

DOM中表單操作和節(jié)點(diǎn)操作的示例

發(fā)布時(shí)間：2021-01-30 13:56:15 來源：億速云 閱讀：129 作者：小新 欄目：web開發(fā)

這篇文章主要介紹了DOM中表單操作和節(jié)點(diǎn)操作的示例，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

DOM中表單操作和節(jié)點(diǎn)操作的示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var input = document.querySelectorAll('input');
var table = document.querySelector('table');
var rows = table.tBodies[0].rows;
var arrRows = [];
/* 因?yàn)橹荒軐?duì)數(shù)組排序，所以把tr都放入數(shù)組 */
for(var i = 0; i < rows.length; i++){
arrRows.push(rows[i]);
}
// arrRows.sort(function(a,b){
// return  b.cells[1].innerHTML - a.cells[1].innerHTML;
// //根據(jù)tr中的第1個(gè)單元格中的內(nèi)容進(jìn)行排序
// });
// arrRows.forEach(function(tr){
// //按照排號(hào)的順序，重新把tr放入tbody
// table.tBodies[0].appendChild(tr);
// });
//console.log(arrRows);
input[0].onclick = function(){
arrRows.sort(function(a,b){
return  b.cells[1].innerHTML - a.cells[1].innerHTML;
//根據(jù)tr中的第1個(gè)單元格中的內(nèi)容進(jìn)行排序
});
arrRows.forEach(function(tr){
//按照排號(hào)的順序，重新把tr放入tbody
table.tBodies[0].appendChild(tr);
});
}
input[1].onclick = function(){
arrRows.sort(function(a,b){
return  a.cells[1].innerHTML - b.cells[1].innerHTML;
//根據(jù)tr中的第1個(gè)單元格中的內(nèi)容進(jìn)行排序
});
arrRows.forEach(function(tr){
//按照排號(hào)的順序，重新把tr放入tbody
table.tBodies[0].appendChild(tr);
});
}
};
</script>
</head>
<body>
<table border="1" width="400" align="center">
<thead>
<tr>
<th>水果</th>
<th>單價(jià)(￥)</th>
</tr>
</thead>
<tbody>
<tr>
<th>蘋果</th>
<th>54.5</th>
</tr>
<tr>
<th>橘子</th>
<th>24.5</th>
</tr>
<tr>
<th>西瓜</th>
<th>33.8</th>
</tr>
<tr>
<th>香蕉</th>
<th>13.8</th>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2" style="text-align: center;">
<input type="button" value="價(jià)格從高到低排列">
<input type="button" value="價(jià)格從低到高排列">
</td>
</tr>
</tfoot>
</table>
</body>
</html>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“DOM中表單操作和節(jié)點(diǎn)操作的示例”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

dom
AI
助
手