jQuery+HTML动态表格的实现

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<head>
    <title>动态表格</title>
    <script type="text/javascript" src="js/plugins/jquery-1.7.min.js"></script>
    <style type="text/css">
        .div{
            width: 95%;
            float: left;
            margin-top: 30px;
            align: center;
            margin: 0 auto;
        }
        .tableStyle
        {
            display: none;
            border-collapse: collapse;
            width:50%;
        }
        td
        {
            font-size:12px;
            height:25px;
            border:1px solid #CCD5E8;
        }
        .btn {
            font-size:12pt; color: #003399;
            border: 1px #003399 solid;
            color:#006699;
            border-bottom: #93bee2 1px solid;
            border-left: #93bee2 1px solid;
            border-right: #93bee2 1px solid;
            border-top: #93bee2 1px solid;
            background-color: #e8f4ff;
            cursor: pointer;
            font-style: normal ;
            width:80px;
            height:22px;
            font-family:Verdana;font-family:Georgia;_font-family:Tahoma;
            padding:0 10px 1px;padding:3px 3px 1px;_padding:0 4px 1px;
            line-height:18px;line-height:14px;_line-height:16px;
        }
    </style>
</head>
<body>
    <div class="div">
        <select id="select" name="select">
            <option value="0">--请选择--</option>
            <option value="1" class="s">载重</option>
            <option value="2" class="s">速度</option>
        </select><br/><br/>
        <button onclick="showTable()">点击填写参数</button><br/><br/>
        <div id="showTable">
            <table class="tableStyle" id="table">
                <thead>
                    <tr>
                        <th width="50px">操作</th>
                        <th width="50px">结果</th>
                    </tr>
                </thead>
                <tbody>
                    <tr id="StructureRight">
                        <td><input id="btnAddRow" class="btn" onclick="addRow()" type="button" value="+" /></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>


    <script language="javascript" type="text/javascript">
        var rowCount = 1;
        var colCount = 2;

        // 获取下拉列表的值,以赋上点击事件
        window.onload = function () {
            var sel = document.getElementsByName("select")[0];
            sel.onchange = function () {
                var val = this.value;
                switch (val){
                    case "0":
                        //addCol();
                        break;
                    case "1":
                        addColDL();
                        break;
                    case "2":
                        addColV();
                        break;
                }
            }
        }
        var html='';

        //点击出现表格
        function showTable() {
            document.getElementById("table").style.display = document.getElementById("table").style.display=="none"?"block":"none";
        }

        //增加载重列
        function addColDL(){
            colCount++;
            $th = $("<th>载重</th>");
            $col = $("<td><input/></td>");
            $("#table>thead>tr").append($th);
            $("#table>tbody>tr").append($col);
        }

        //增加速度列
        function addColV(){
            colCount++;
            $th = $("<th>速度</th>");
            $col = $("<td><input/></td>");
            $("#table>thead>tr").append($th);
            $("#table>tbody>tr").append($col);
        }

        //增加行
        function addRow(){
            rowCount++;
            for(var i=0;i<colCount-2;i++){
                html += '<td><input/></td>';
            }
            var rowTemplate = '<tr class="tr_'+rowCount+'"><td><input id="btnAddRow" class="btn" onclick=delRow(this) type="button" value="-" /></td><td></td>'+html+'</tr>';
            var tableHtml = $("#table tbody").html();
            tableHtml += rowTemplate;
            $("#table tbody").html(tableHtml);
            html='';
        }

        //删除行
        function delRow(obj){
            var res = confirm('确认要删除吗?');
            if(res == true)
            {
                $(obj).parents("tr").remove();
            }
            rowCount--;
        }
    </script>
</body>
</html>

阅读更多
文章标签: html jQuery
上一篇小程序入坑(一)list列表以及item详情页,json传送时间戳转换成年月日
下一篇mybatis解决数字库字段名和实体类字段不一致的方法
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭