动态添加一行

<!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" />
<title>js动态增加，删除table</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--表单验证样式表-->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
    //增加
    function inserttable() {
        var newnode = $(‘#yltable‘)[0].cloneNode(true);
        var content = newnode.innerHTML;
        content = content.replace(/\[0\]/g, "["+ $(‘#div_bjbr‘)[0].childNodes.length + "]");
        content = "<table id=‘yltable‘>" + content + "</table>";

        if($(‘#div_bjbr‘)[0].childNodes.length <=6){
        $(‘#div_bjbr‘)[0].innerHTML=$(‘#div_bjbr‘)[0].innerHTML+content;
        }else{
            alert("最多同时添加5个信息!");
        }
    }

    //删除
    function deletetable() {
        var parent = $(‘#div_bjbr‘)[0];
        if (parent.childNodes.length > 1) {
            parent.removeChild(parent.lastChild);
        }
    }
</script>
</head>

<body>
    <div class="center_division">
        <div class="center_body_menu">
            <form action="ReportAction_saveReport" id="form1" name="form1"
                method="post" namespace="/" enctype="multipart/form-data">
                <table id="tb">
                    <tr>
                        <td colspan="6" align="left"
                            style="padding-left:10px; background-color:#DDDFE1;">被人基本信息</td>
                    </tr>
                    <tr>
                        <td colspan="6" align="center">
                            <div id="div_bjbr">
                                <table id="yltable">
                                    <TBODY id=yl1>
                                        <tr>
                                            <td width="130" bgcolor="#eef0f7">主体类别<font
                                                color="#FF0000">*</font></td>
                                            <td><select style="width:153px" id="beiJuBaoMainSort"
                                                name="reportedPersons[0].beiJuBaoMainSort">
                                                    <option selected="selected" value="">--请选择--</option>
                                                    <option value="个人">个人</option>
                                                    <option value="单位">单位</option>
                                            </select></td>
                                            <td width="130"><div id="beiJuBaoMainSortTip"></div></td>
                                            <td width="130" bgcolor="#eef0f7">名称<font
                                                color="#FF0000">*</font></td>
                                            <td><input type="text"
                                                name="reportedPersons[0].beiJuBaoName" id="beiJuBaoName" />
                                                </td>
                                                <td width="130"><div id="beiJuBaoNameTip"></div>
                                            </td>
                                        </tr>
                                    </TBODY>
                                    <TBODY id=yl2>
                                        <tr>
                                            <td width="130" bgcolor="#eef0f7">性别</td>
                                            <td><select style="width:153px" id="beiJuBaoSex"
                                                name="reportedPersons[0].beiJuBaoSex">
                                                    <option selected="selected" value="">--请选择--</option>
                                                    <option value="男">男</option>
                                                    <option value="女">女</option>
                                            </select></td>
                                            <td width="130"><div id="beiJuBaoSexTip"></div></td>
                                            <td width="130" bgcolor="#eef0f7">身份</td>
                                            <td><select style="width:153px"
                                                id="beiJuBaoSpecialIdentity"
                                                name="reportedPersons[0].beiJuBaoSpecialIdentity">
                                                    <option selected="selected" value="">--请选择--</option>
                                                    <option value="全国人大代表">全国人大代表</option>
                                                    <option value="省市区人大代表">省市区人大代表</option>
                                                    <option value="市地州盟人大代表">市地州盟人大代表</option>
                                                    <option value="县市区人大代表">县市区人大代表</option>
                                                    <option value="全国政协委员">全国政协委员</option>
                                                    <option value="省市区政协委员">省市区政协委员</option>
                                                    <option value="市地州盟政协委员">市地州盟政协委员</option>
                                                    <option value="县市区政协委员">县市区政协委员</option>
                                                    <option value="民主人士">民主人士</option>
                                                    <option value="知名人士">知名人士</option>
                                                    <option value="其他">其他</option>
                                            </select></td>
                                            <td width="130"><div id="beiJuBaoSpecialIdentityTip"></div></td>
                                        </tr>
                                    </TBODY>
                                    <TBODY id=yl3>
                                        <tr>
                                            <td width="130" bgcolor="#eef0f7">住址</td>
                                            <td><input type="text"
                                                name="reportedPersons[0].beiJuBaoAddress"
                                                id="beiJuBaoAddress" />
                                            </td>
                                            <td><div id="beiJuBaoAddressTip"></div></td>
                                            <td width="130" bgcolor="#eef0f7">联系电话</td>
                                            <td><input type="text"
                                                name="reportedPersons[0].beiJuBaoPhone" id="beiJuBaoPhone" />
                                            </td>
                                            <td width="130"><div id="beiJuBaoPhoneTip"></div></td>
                                        </tr>
                                        <tr>
                                            <td width="130" bgcolor="#eef0f7">单位名称</td>
                                            <td><input type="text"
                                                name="reportedPersons[0].beiJuBaoCompanyName"
                                                id="beiJuBaoCompanyName" />
                                            </td>
                                            <td width="130"><div id="beiJuBaoCompanyNameTip"></div></td>
                                            <td width="130" bgcolor="#eef0f7">职务</td>
                                            <td><input type="text"
                                                name="reportedPersons[0].beiJuBaoPost" id="beiJuBaoPost" />
                                            </td>
                                            <td width="130"><div id="beiJuBaoPostTip"></div></td>
                                        </tr>
                                    </TBODY>
                                    <TBODY id=yl4>
                                        <tr>
                                            <td width="130" bgcolor="#eef0f7">单位地址</td>
                                            <td><input type="text"
                                                name="reportedPersons[0].beiJuBaoCompanyAddress"
                                                id=beiJuBaoCompanyAddress />
                                            </td>
                                            <td width="130"><div id="beiJuBaoCompanyAddressTip"></div></td>
                                            <td width="130" bgcolor="#eef0f7">所在地区</td>
                                            <td><select style="width:153px" id="beiJuBaoArea"
                                                name="reportedPersons[0].beiJuBaoArea">
                                                    <option selected="selected" value="">--请选择--</option>
                                                    <option value="北京市">北京市</option>
                                                    <option value="天津市">天津市</option>
                                                    <option value="河北省">河北省</option>
                                                    <option value="山西省">山西省</option>
                                                    <option value="内蒙古自治区">内蒙古自治区</option>
                                                    <option value="辽宁省">辽宁省</option>
                                                    <option value="吉林省">吉林省</option>
                                                    <option value="黑龙江省">黑龙江省</option>
                                                    <option value="上海市">上海市</option>
                                                    <option value="江苏省">江苏省</option>
                                                    <option value="浙江省">浙江省</option>
                                                    <option value="安徽省">安徽省</option>
                                                    <option value="福建省">福建省</option>
                                                    <option value="江西省">江西省</option>
                                                    <option value="山东省">山东省</option>
                                                    <option value="河南省">河南省</option>
                                                    <option value="湖北省">湖北省</option>
                                                    <option value="湖南省">湖南省</option>
                                                    <option value="广东省">广东省</option>
                                                    <option value="广西壮族自治区">广西壮族自治区</option>
                                                    <option value="海南省">海南省</option>
                                                    <option value="重庆市">重庆市</option>
                                                    <option value="四川省">四川省</option>
                                                    <option value="贵州省">贵州省</option>
                                                    <option value="云南省">云南省</option>
                                                    <option value="西藏自治区">西藏自治区</option>
                                                    <option value="陕西省">陕西省</option>
                                                    <option value="甘肃省">甘肃省</option>
                                                    <option value="青海省">青海省</option>
                                                    <option value="宁夏回族自治区">宁夏回族自治区</option>
                                                    <option value="新疆维吾尔自治区">新疆维吾尔自治区</option>
                                                    <option value="深圳市">深圳市</option>
                                                    <option value="大连市">大连市</option>
                                                    <option value="宁波市">宁波市</option>
                                                    <option value="厦门市">厦门市</option>
                                                    <option value="青岛市">青岛市</option>
                                                    <option value="台湾">台湾</option>
                                                    <option value="香港">香港</option>
                                                    <option value="澳门">澳门</option>
                                                    <option value="其他">其他</option>
                                            </select></td>
                                            <td width="130"><div id="beiJuBaoAreaTip"></div></td>
                                        </tr>
                                    </TBODY>
                                    <TBODY id=yl5>
                                        <tr>
                                            <td width="130" bgcolor="#eef0f7">注册地址</td>
                                            <td><input type="text"
                                                name="reportedPersons[0].beiJuBaoRegisteredAddress"
                                                id="beiJuBaoRegisteredAddress" />
                                            </td>
                                            <td width="130"><div id="beiJuBaoRegisteredAddressTip"></div></td>
                                            <td width="130" bgcolor="#eef0f7">办公地址</td>
                                            <td><input type="text"
                                                name="reportedPersons[0].beiJuBaoOfficeAddress"
                                                id="beiJuBaoOfficeAddress" />
                                            </td>
                                            <td width="130"><div id="beiJuBaoOfficeAddressTip"></div></td>
                                        </tr>
                                        <tr>
                                            <td width="130" bgcolor="#eef0f7">法人代表</td>
                                            <td><input type="text"
                                                name="reportedPersons[0].beiJuBaoLegalPerson"
                                                id="beiJuBaoLegalPerson" />
                                            </td>
                                            <td width="130"><div id="beiJuBaoLegalPersonTip"></div></td>
                                            <td width="130" bgcolor="#eef0f7"></td>
                                            <td></td>
                                            <td width="130"><div></div></td>
                                        </tr>
                                    </TBODY>
                                </table>
                            </div>
                            </td>
                    </tr>
                    <tr>
                        <td colspan="6"><input type="button" name="button"
                            value="新 增" style="width:60px; height:24px;"
                            onclick="inserttable()" />      <input
                            type="button" name="button" value="删 除"
                            style="width:60px; height:24px;" onclick="deletetable()" /></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
</body>
</html>
<extend name=‘Public:main‘ />
<block name=‘body‘>
<script type="text/javascript">
    //增加
    function inserttable() {
        var newnode = $(‘#yltable‘)[0].cloneNode(true);
        var content = newnode.innerHTML;
        content = content.replace(/\[0\]/g,  $(‘#div_bjbr‘)[0].childNodes.length );
        content = "<tr id=‘yltable‘  class=‘table_title‘>" + content + "</tr>";
        $(‘#div_bjbr‘)[0].innerHTML=$(‘#div_bjbr‘)[0].innerHTML+content;
        //if($(‘#div_bjbr‘)[0].childNodes.length <=6){
        //$(‘#div_bjbr‘)[0].innerHTML=$(‘#div_bjbr‘)[0].innerHTML+content;
        //}else{
            //alert("最多同时添加5个信息!");
        //}
    }

    //删除
    function deletetable() {
        var parent = $(‘#div_bjbr‘)[0];
        if (parent.childNodes.length > 1) {
            parent.removeChild(parent.lastChild);
        }
    }
</script>

        <gt name="info.id" value="0">
            <form action="{:U(‘/Admin/Keydata/edit‘)}" method="post" name="form" id="myform">
            <input type="hidden" name="id" value="{$info.id}">
        <else />
            <form action="{:U(‘/Admin/Keydata/add‘)}" method="post" name="form" id="myform">
        </gt>
        <table width="98%" border="0" cellpadding="12" cellspacing="1" class="table" id="div_bjbr">
                <tr class="table_title">
                    <td colspan="12" style="color:red;font-size: 16px;">选择账户->选择项目->选择端口->选择平台->选择区域->选择类别</td>
                </tr>
                <tr class="table_title">
                    <th style="color:red;font-size: 16px;">端口</td>
                    <th style="color:red;font-size: 16px;">区域</td>
                    <th style="color:red;font-size: 16px;">类别</td>
                    <th style="color:red;font-size: 16px;">投放费用</td>
                    <th style="color:red;font-size: 16px;">实际消费</td>
                    <th style="color:red;font-size: 16px;">展现量</td>
                    <th style="color:red;font-size: 16px;">点击量</td>
                    <th style="color:red;font-size: 16px;">咨询量</td>
                    <th style="color:red;font-size: 16px;">有效咨询量</td>
                    <th style="color:red;font-size: 16px;">留电话量</td>
                    <th style="color:red;font-size: 16px;">留QQ量</td>
                    <th style="color:red;font-size: 16px;">到诊量</td>
                </tr>

                <tr  class="table_title" id="yltable">

                                <td>
                                    <select style="width:91px"
                                        name="data[0].duankou">
                                        <option selected="selected" value="">--请选择--</option>
                                    </select>
                                </td>
                                <td>
                                    <select style="width:91px"
                                        name="data[0].quyu">
                                        <option selected="selected" value="">--请选择--</option>
                                    </select>
                                </td>
                                <td>
                                    <select style="width:91px"
                                        name="data[0].leibie">
                                        <option selected="selected" value="">--请选择--</option>
                                    </select>
                                </td>
                                <td><input type="text" name="data[0].toufangfeiyong" style="width:50px" /></td>
                                <td><input type="text" name="data[0].shijixiaofei" style="width:50px" /></td>
                                <td><input type="text" name="data[0].zhanxianliang" style="width:50px" /></td>
                                <td><input type="text" name="data[0].dianjiliang" style="width:50px" /></td>
                                <td><input type="text" name="data[0].zixunliang" style="width:50px" /></td>
                                <td><input type="text" name="data[0].youxiaozixunliang" style="width:50px" /></td>
                                <td><input type="text" name="data[0].liudianhualiang" style="width:50px" /></td>
                                <td><input type="text" name="data[0].liuqqliang" style="width:50px" /></td>
                                <td><input type="text" name="data[0].daozhenliang" style="width:50px" /></td>

                    </tr>

        </table>
        <table width="98%" border="0" cellpadding="12" cellspacing="1" class="table" >

        <tr  class="table_title">
                        <td colspan="12"><input type="button" name="button"
                            value="新 增" style="width:60px; height:24px;"
                            onclick="inserttable()" />      <input
                            type="button" name="button" value="删 除"
                            style="width:60px; height:24px;" onclick="deletetable()" /></td>
             </tr>

             </table>

        </form>

</block>
时间： 2024-10-10 08:20:34

动态添加一行的相关文章

Ext如何动态添加一行组件

用的column布局,点击一个按钮能添加一行组件,如文本框,有下拉框等. 如: 效果: 实现方法如下: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69

利用jquery给指定的table动态添加一行、删除一行

$("#mytable tr").find("td:nth-child(1)") 1表示获取每行的第一列$("#mytable tr").find("td:nth-child(3)") 3表示获取每行的第三列 今天在项目中,刚好用到给指定的table添加一行.删除一行,就直接找google,搜出来的东西不尽如人意,不是功能不好就是千篇一律,简直浪费时间还不讨好,于是乎就自己动手封装个,现就把代码分享出来,避免大伙重复造轮子,如

在一个table中动态添加一行或删除一行

<table id="selected_user_table" width="100%" > <thead> <tr><th class="center" colspan="2"  style="background-color:#F2F2F2;height:20px;">已选择</th></tr> </thead> <

如何在JTable中动态添加一行

JTable tbImage = new JTable(5,5);//create a dummy tableDefaultTableModel dtm=(DefaultTableModel)tbImage.getModel();dtm.addRow(...); Vector vData = new Vector();Vector vName = new Vector();vName.add("column1");vName.add("column2");Vecto

jquery动态添加删除一行数据

<html> <head> <title>添加.删除一行</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="../js/jquery-1.9.1.js"></script>

利用jquery动态添加和删除表格的一行，并且保存单行数据

开发时遇到一个需求:要求要在页面的表格可以添加和删除一行,并能填写对应的数据后保存这一行数据. HTML代码 界面使用了freemarker框架,teams是后台传过来的list类型数据 <form action="" id="" method="post"> ... <table id="addTable" > <tr class="first_tr"> <th&

js实现表格行的动态添加------Day56

现代页面通常都是用div+css来进行设计,几乎很少再有用table来进行布局的了,但是这并不意味着table的重要性就降低了,事实上,table在数据处理上有着它独特的优势,所以对table的掌握还是很有必要的. 我们首先要记录的问题是:js动态的添加表格的行和列 我们先给定一个table,先用html语言编写下: <table width="100%" height="300px" border="1px" id="tad&q

jQuery动态添加删除与添加表行代码

具体实现代码如下: table的HTML如下: 代码如下 复制代码 <input type="button" value="添加一行" /><table><tr><td><input type="button" class = "del" value="删除该行"/></td></tr></table> 添加行的

Android之ListView动态添加数据（SQLiteOpenHelper类添加数据）

一.SQLiteOpenHelper类: 这次我们通过sqlite来动态添加数据,接下来我们创建一个openHelper.java,在前面sqlite博客中我们已经详细的讲了SQLite的创建及使用等操作,我们将在onCreate 创建方法中创建一张表和插入相关的值,通过db.execSQL()完成Sqlite的运行. ①openHelper2.java文件: public class openHelper2 extends SQLiteOpenHelper { private static f