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="刪除該行" οnclick="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
        }

初始
這裏寫圖片描述


添加數據後

這裏寫圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章