YEN_CSDN的博客

如果真的相信什么,就要用尽全力去让它发生。

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

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
        }

初始
这里写图片描述


添加数据后

这里写图片描述

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/YEN_CSDN/article/details/55051205
文章标签: javascript 前端 web
所属专栏: JavaEE专业技能
想对作者说点什么? 我来说一句

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

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭