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

user2041

于 2017-08-07 18:06:33 发布

阅读量1.6k

点赞数

分类专栏： javascript

javascript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

代码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

user2041

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
动态给table 添加 tr(行)，实现添加多个对象转载hbiao68

<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"></sc
复制链接

扫一扫