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
}
初始
添加數據後