JavaScript实现动态添加页面的表格行数并获取数据
2017-02-13 18:04
1161 查看
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 }
初始
添加数据后
相关文章推荐
- ajax异步获取数据后动态向表格中添加数据的页面
- Javascript动态生成表格,并添加按钮,页面加载自动实现
- ITOO---MVC3.0动态添加表格的行数并Controller中获取添加数据
- ThinkPHP定时ajax获取后台数据,使用javascript动态修改前端页面的表格来显示数据
- javascript实现动态生成(页面元素)以表格为例
- 应用jQuery实现表格数据的动态添加与统计
- 应用jQuery实现表格数据的动态添加与统计
- 服务器端获取客户端动态添加的表格行数据的一个简单示例
- javascript动态生成表格,并实现对表格行的添加和删除
- 如何实现服务器端下页面动态添加JavaScript脚本
- JS小功能(操作Table--动态添加删除表格及数据)实现代码
- 如何实现服务器端下页面动态添加JavaScript脚本
- .Net 点击按钮实现动态添加行并保持页面的数据不变
- JS小功能(操作Table--动态添加删除表格及数据)实现代码
- 基于对象的JavaScript实现无刷新页面发送和获取数据Ajax.js
- 通过javascript实现动态添加删除表格的行
- php+javascript+css 实现动态添加数据行
- JavaScript动态实现表格添加、删除、插入、上移、下移一行功能
- GridView中 对数据编辑打开一个新页面 & 动态添加控件并获取其值
- 如何实现服务器端下页面动态添加JavaScript脚本