HTML--表格追加元素的方法

本文转载自查看原文 2017-12-10 00:11 1379 Html

表格追加元素，在Html与后台交互是十分常用的，不过有很多框架都封装掉了，这里就猜一猜它们可能是怎么实现的。

（PS：我做后端的，确实不怎么关注前端，哪一种实现最好，效率最高，望告知）

关于页面事件丢失的问题，只要注意函数的调用顺序即可。

感觉还可以通过document.createElement，再appendChild的方式来实现，感兴趣地可以试一下。

JQuery实现

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表格追加内容</title>
    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <style type="text/css">
        .mytr {
            font-size: 13px;
            color: #666;
            background-color: #ecf0f5;
        }
    </style>
    <title>修改Html属性</title>
</head>
<body>
<table id="mytable">
    <tr id="mytr" class="mytr" onclick="alerts()">
        <td>row1</td>
    </tr>
</table>
<script>
    function alerts() {
        alert("click");
    }
    $("#mytable").append("<tr id='mytr' class = 'mytr' onclick='alerts()'><td>row2</td></tr>");
</script>
</body>
</html>

JavaScript实现

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>表格追加内容</title>
    <style type="text/css">
        .mytr {
            font-size: 13px;
            color: #666;
            background-color: #ecf0f5;
        }
    </style>
    <title>修改Html属性</title>
</head>
<body onload="appr()">
<table id="mytable">
    <tr id="mytr" class="mytr" onclick="appr()">
        <td>row1</td>
    </tr>
</table>
<script type="text/javascript">
    function alerts() {
        alert("click");
    }
    function appr(){
        var table=document.getElementById('mytable').insertRow(0);
        var row1=table.insertCell(0);
        row1.className = 'mytr';
        row1.id = 'mytr';
        row1.onclick = alerts;
        row1.innerHTML="<td>row2</td>";
    }
</script>
</body>
</html>

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 jQuery 追加元素、拼接元素的方法总结（append、html、insertBefore、before等） js追加元素 HTML--表格与表单 js中常用追加元素的几种方法 jQuery 追加元素的方法如append、prepend、before jQuery 追加元素的方法如append、prepend、before，after（转） HTML--三种样式插入方法--链接---表格---列表 js创建与追加元素向map中追加元素 jquery 元素控制(追加元素/追加内容)