前端开发JS动态生成表格

移动h5 前端开发框架有哪些
web前端开发最新框架
前端框架的开发
#####html 代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset=”UTF-8″ />
        <title></title>
        <style type=”text/css”></style>
        <script type=”text/javascript”>
            window.onload = function () {
                var oTab = document.getElementById(‘table1’);
                var oName = document.getElementById(‘name’);
                var oAge = document.getElementById(‘age’);
                var oBtn = document.getElementById(‘btn’);
                var oSearch = document.getElementById(‘search’);
                var oSearchBtn = document.getElementById(‘searchBtn’);
                var id = oTab.tBodies[0].rows.length + 1 //定义序号变量
                oBtn.onclick = function () {
                    var oTr = document.createElement(‘tr’);
                    var oTd = document.createElement(‘td’);
                    oTd.innerHTML = id++ < br />
                        oTr.appendChild(oTd);
                    var oTd = document.createElement(‘td’);
                    oTd.innerHTML = oName.value;
                    oTr.appendChild(oTd);
                    var oTd = document.createElement(‘td’);
                    oTd.innerHTML = oAge.value;
                    oTr.appendChild(oTd);
                    var oTd = document.createElement(‘td’);
                    oTd.innerHTML = ‘<a href=”javascript:;”>删除</a>’ < br />
                        oTr.appendChild(oTd) //添加表格行
                    oTab.tBodies[0].appendChild(oTr) < br />
                        oTd.getElementsByTagName(‘a’)[0].onclick = function() {
                            oTab.tBodies[0].removeChild(this.parentNode.parentNode) < br />
             };
                };
                oSearchBtn.onclick = function () {
                    for (var i = 0; i < oTab.tBodies[0].rows.length; i++) {
                        var str = oTab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase().split(”);
                        var Attr = oSearch.value.toLowerCase();
                        for (var j = 0; j < str.length; j++) {
                            if (str[j] == Attr) {
                                oTab.tBodies[0].rows[i].style.backgroundColor = ‘yellow’;
                                break;
                            }
                        }
                    }
                };
            };
        </script>
    </head>
    <body>
        姓名:<input type=”text” id=”name” placeholder=”请输入姓名” /> 年龄:
        <input type=”text” id=”age” placeholder=”请输入年龄” />
        <input id=”btn” type=”button” value=”添加” /><br /><br />
        <input type=”text” id=”search” placeholder=”请输入你的姓名” />
        <input type=”button” id=”searchBtn” value=”搜索” /><br /><br />
        <table id=”table1″ border=”1″ width=”800px”>
            <thead>
                <td>ID</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>操作</td>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>陈子君</td>
                    <td>25</td>
                    <td></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Blue</td>
                    <td>13</td>
                    <td></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>张三</td>
                    <td>45</td>
                    <td></td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>李四</td>
                    <td>50</td>
                    <td></td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>S物流</td>
                    <td>35</td>
                    <td></td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>我</td>
                    <td>27</td>
                    <td></td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>surPrise</td>
                    <td>30</td>
                    <td></td>
                </tr>
            </tbody>
        </table>
    </body>
</html>
web前端开发三大框架是什么
前端数据驱动开发框架
东软 前端开发框架
» 本文来自:前端开发者 » 《前端开发JS动态生成表格》
» 本文链接地址:https://www.rokub.com/7262.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!