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 = ''_dpDate' + i + '" style="width:98%;" title="车型" value="" />';
            newTd1.innerHTML = ''_1" style="width:98%;" title="数量"  value=""/>';

            newTd2.innerHTML = ''" />';
//            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;ivar 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
        }

初始
这里写图片描述


添加数据后

JavaScript实现动态添加页面的表格行数并获取数据_第1张图片

你可能感兴趣的:(javascript,前端,web,----【Web前端】,JavaEE专业技能)