关闭

JavaScript实现动态添加页面的表格行数并获取数据

标签: javascript前端web
2846人阅读 评论(0) 收藏 举报
分类:

JavaScript实现动态添加页面的表格行数并获取数据,获取后的数据按照特殊的方式拼接存入数据库,用的时候再把它解析出来就行了。



<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>
      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
        }

初始
这里写图片描述


添加数据后

这里写图片描述

1
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:195633次
    • 积分:3395
    • 等级:
    • 排名:第10939名
    • 原创:150篇
    • 转载:0篇
    • 译文:0篇
    • 评论:55条
    联系方式
    博客专栏
    文章分类