动态给table 添加 tr(行)，实现添加多个对象转载hbiao68

来源：互联网发布：java编程思想 pdf 编辑：程序博客网时间：2024/05/20 16:36

代码1

<html>    <head>        <title>usually function</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    </head>    <script type="text/javascript" src="jquery-1.4.4.js"></script>    <body>        <table border="1px" id="targetTable">            <tr border="1px">                <td>序号</td>                <td>姓名</td>                <td>年龄</td>                <td>生日</td>                <td>备注</td>            </tr>            <tr  id="model" style="display:none" border="1px">                <td></td>                <td><input type="text" name="username"></td>                <td><input type="text" name="age"></td>                <td><input type="text" name="birthday"></td>                <td><input type="text" name="note"><span onclick="del(this)">删除</span></td>            </tr>        </table>        <br>        <br>        用户输入表单：        姓名<input type="text" name="u_username"><br>        年龄<input type="text" name="u_age"><br>        生日<input type="text" name="u_birthday"><br>        备注<input type="text" name="u_note"><br>        <button onclick="add()" style="font-size:12px">添加</button>    </body><html>  <script>function del(obj){    //alert($(obj).closest("tr").attr("outerHTML"));    //$(obj).closest("tr").attr("outerHTML","")    $(obj).closest("tr").remove();    resetSequenceNum();}function add(){    //获取表单的值    var u_username = $("input[name='u_username']").val();    var u_age = $("input[name='u_age']").val();    var u_birthday = $("input[name='u_birthday']").val();    var u_note = $("input[name='u_note']").val();    //alert(u_username);    //判断表单的值是否为空    if(u_username=="" || u_username==undefined){        alert("用户姓名不能为空");        $("input[name='u_username']").focus();        return false;    }    //缓存要赋值的内容，避免多次查询，提高效率    var trstr = $("#model").attr("outerHTML");    //alert(trstr);    //复制最后一行的代码添加到表的最后一行    $("#targetTable tr").last().after(trstr);    //$("#targetTable").find("tr").last().after(trstr);    //让最后一行显示出来，而不是隐藏    //$("#targetTable tr").last().css("display","block");会出现浏览器兼容的问题，在ff中显示不正常    $("#targetTable tr").last().css("display","");    //赋值    var target = $("#targetTable tr").last().find("td");    target.find("input[name='username']").val(u_username);    target.find("input[name='age']").val(u_age);    target.find("input[name='birthday']").val(u_birthday);    target.find("input[name='note']").val(u_note);    resetValue();    resetSequenceNum();}//清空表单的值function resetValue(){    $("input[name='u_username']").val("");    $("input[name='u_age']").val("");    $("input[name='u_birthday']").val("");    $("input[name='u_note']").val("");}//重新设置序号function resetSequenceNum(){    var num=0;    $("#targetTable tr").each(function(index,dom){        if(index!=0){            $(dom).find("td").first().html(num);            num++;        }    });}</script>

代码2

<table cellpadding="0" cellspacing="0" id="myTable">    <tr>        <th>车型</th>        <th>数量</th>        <th>操作</th>    </tr>    <tr>        <td><input type="text"  value=""  maxlength="255" placeholder="" title="车型" style="width:98%;"/></td>        <td><input type="text"   value=""  maxlength="255" placeholder="" title="数量" style="width:98%;"/></td>        <td><input type="hidden" id="reC" value="1" />            <a class="btn btn-mini btn-info" onclick="addRows();">增加行</a>            <a class="btn btn-mini btn-danger" onclick="saveTableValue();">表格数据</a>        </td>    </tr></table><script>  function addRows() {            //记录总共添加几行            document.getElementById("reC").value = parseInt(document.getElementById("reC").value) + 1;//获取中的行数            //添加一行            var i = parseInt(myTable.rows.length);            var newTr = myTable.insertRow();            //添加列            var newTd0 = newTr.insertCell();            var newTd1 = newTr.insertCell();            var newTd2 = newTr.insertCell();            //设置列内容和属性            newTd0.innerHTML = '<input type="text" id="dpDate' + i + '_dpDate' + i + '" style="width:98%;" title="车型" value="" />';            newTd1.innerHTML = '<input type="text" id="txtR' + i + '_1" style="width:98%;" title="数量"  value=""/>';            newTd2.innerHTML = '<input type="submit" class="btn btn-mini btn-warning"  value="删除该行" onclick="deleRow()" id="btnDele' + i + '" />';//            saveTableValue();//保存值            return false;        }        //删除一行        function deleRow() {            //获得行索引            //两个parentElement分别是TD和TR，rowIndex是TR的属性            var cGetRow = window.event.srcElement.parentElement.parentElement.rowIndex;            alert("点击了第"+cGetRow);            myTable.deleteRow(cGetRow);//            saveTableValue();//保存值            return false;        }        //保存表格中最新的值        function saveTableValue() {            var myTable = document.getElementById("myTable");//            alert("表格总行数="+ parseInt(myTable.rows.length));            tableValue="";            for (var i=1;i<myTable.rows.length;i++){                var value1 = myTable.rows[i].cells[0].getElementsByTagName("input")[0].value;//车辆类型                var value2 = myTable.rows[i].cells[1].getElementsByTagName("input")[0].value;//派车数量                var rowValue=value1+"_"+value2; //"_"来连接                tableValue=tableValue+rowValue+"+";            }            alert("表格内拼接的值"+tableValue);            $("#USECATTYPENUM").val(tableValue);//把表格的值付给input            </script>

转载至
http://hbiao68.iteye.com/blog/1958809

阅读全文

0 0