实现表格是增删改复

最新推荐文章于 2024-06-20 11:37:30 发布

蘑菇酱酱

最新推荐文章于 2024-06-20 11:37:30 发布

阅读量105

点赞数

文章标签： html5 html javascript

本文链接：https://blog.csdn.net/qq_53867976/article/details/120541522

版权

实现表格是增删改复

实现表格增加一行，删除第二行，修改标题，复制最后一行

<!DOCTYPE html>
<html lang="ch">
<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>书名和价格</title>
    <script>
        window.onload = function(){
            var tr=document.getElementsByTagName("tr");
            for(var i=0;i<tr.length;i++){
                tr[i].οnmοuseοver=function(){
                    this.style.backgroundColor="#f2f2f2";
                }
                tr[i].οnmοuseοut=function(){
                    this.style.backgroundColor="#fff";
                }
            }
            }
        
            var obj;
        window.onload = function(){
            var tr=document.getElementsByTagName("tr");
            for(var i=0;i<tr.length;i++){
                tr[i].οnmοuseοver=function(){
                    this.style.backgroundColor="#f2f2f2";
                }
                tr[i].οnmοuseοut=function(){
                    this.style.backgroundColor="#fff";
                }
            }
            }
			function trj(){
				var table=document.getElementById("table");
				var tr1=document.createElement("tr");
				var td1=document.createElement("td");
				var td2=document.createElement("td");
				tr1.setAttribute("height","20px");
				table.appendChild(tr1);
				tr1.appendChild(td1);
				tr1.appendChild(td2);
			}
			function trf(){
				var table=document.getElementById("table");
				var tr1=document.createElement("tr");
				var td1=document.createElement("td");
				var td2=document.createElement("td");
				tr1.setAttribute("height","20px");
				table.appendChild(tr1);
				tr1.appendChild(td1);
				tr1.appendChild(td2);
				td1.innerHTML="60个瞬间";
				td2.innerHTML="￥32.00";
			}
			function trs(){
				var tr1=document.getElementById("tr1");
				tr1.parentNode.removeChild(tr1);
			}
			function trh(){
				var th=document.getElementById("th");
				th.setAttribute("style","text-align: center;font-weight: bold;background-color: #ccc;");
			}
    </script>

</head>
<body>
    <table id="table" border="1px" width="300px" id="tad1" cellspacing="0px">
        <thead>
            <tr id="th">
                <td>书名</td>
                <td>价格</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>看得见风景的房间</td>
                <td>￥30.00</td>
            </tr>
            <tr id="tr1">
                <td>幸福从天而降</td>
                <td>￥18.50</td>
            </tr>
            <tr >
                <td>60个瞬间</td>
                <td>￥32.00</td>
            </tr>
        </tbody>
    </table>
    <button onclick="trj()">增加一行</button>
    <button onclick="trs()">删除第二行</button>
    <button onclick="trh()">修改标题</button>
    <button onclick="trf()">复制最后一行</button>
</body>
</html>

最后效果

蘑菇酱酱

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
实现表格是增删改复

实现表格是增删改复实现表格增加一行，删除第二行，修改标题，复制最后一行<!DOCTYPE html><html lang="ch"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initi
复制链接

扫一扫