动态生成表格
2021/10/9 23:39:16
本文主要是介绍动态生成表格,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table { width: 500px; margin: 100px auto; border-collapse: collapse; text-align: center; } </style> </head> <body> 姓名:<input type="text" id="name"><br> 科目:<input type="text" id="sbj"><br> 成绩:<input type="text" id="grade"><br> <input type="button" onclick="add()" value="添加"> <table cellspacing="0" border="1"> <thead> <tr> <th>姓名</th> <th>科目</th> <th>成绩</th> <th>操作</th> </tr> </thead> <tbody id="lis"></tbody> </table> <script> function add(){ var name=document.getElementById("name").value; var sbj=document.getElementById("sbj").value; var grade=document.getElementById("grade").value; var tr=document.createElement("tr"); var td1=document.createElement("td"); td1.innerHTML=name; var td2=document.createElement("td"); td2.innerHTML=sbj; var td3=document.createElement("td"); td3.innerHTML=grade; var td4=document.createElement("td"); var a=document.createElement("a"); a.setAttribute("href","javascript:void(0)"); a.setAttribute("onclick","del(this)"); a.innerHTML="删除"; td4.appendChild(a); tr.appendChild(td1); tr.appendChild(td2); tr.appendChild(td3); tr.appendChild(td4); var lis=document.getElementById("lis"); lis.appendChild(tr); } function del(a){ var tr=a.parentNode.parentNode; var lis=document.getElementById("lis"); lis.removeChild(tr); } </script> </body> </html>
这篇关于动态生成表格的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15鸿蒙生态设备数量超8亿台
- 2024-05-13TiDB + ES:转转业财系统亿级数据存储优化实践
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?