使用js实现表格的添加和删除
2017-03-29 14:19
417 查看
1.html界面中代码实现如下
2.表格中添加一行,和删除一行的功能实现
3.获取表格中的第一列数据,并将值存储在数组中
<div> <label for="showLastPage">数据表设置</label></br> <p size="30"> <label style="padding-right:30px;"></label> {{ form.sqlLan.label }} {{ form.sqlLan }} <input type="button" style="position:absolute;left:880px;top:45px;" id="addUsers" value="确定" onclick="btnAdd()"></input> </p> </div></br> <div> <table id="usertable" width="100%" border="1" cellspacing="0" cellpadding="0"> <tbody> <tr> <center><th width="20%;" class='onecenter'>Sql语句数值</th></center> <center><th width="75%;" class='onecenter'>Sql内容</th></center> <center><th width="5%;" class='onecenter'> </th></center> </tr> </tbody> </table> </div></br>
2.表格中添加一行,和删除一行的功能实现
<script charset="utf-8" type="text/javascript"> var iNum=0; function btnAdd(){ iNum++; var str='Sql'+iNum; var selectField=$('select[id=edit_field]').val(); var modifyValue=$('input[id=sql_value]').val(); var selectTd=document.createElement("td"); var selectText=document.createTextNode(str); selectTd.appendChild(selectText); var modifyTd=document.createElement("td"); var modifyText=document.createTextNode(modifyValue); modifyTd.appendChild(modifyText); var aTd=document.createElement("td"); var aElement=document.createElement("a"); aElement.setAttribute("href","deleteEmp?id="+str); var deleteText=document.createTextNode("Delete"); aElement.appendChild(deleteText); aTd.appendChild(aElement); var trElement=document.createElement("tr"); trElement.appendChild(selectTd); trElement.appendChild(modifyTd); trElement.appendChild(aTd); var tableElement=document.getElementById("usertable"); var tbodyElement=document.createElement("tbody"); tbodyElement.appendChild(trElement); tableElement.appendChild(tbodyElement); aElement.onclick=function(){ //return false使网页的链接失效 return delTr(aElement); } function delTr(aELement){ var name=aElement.parentNode.parentNode.firstChild.firstChild.nodeValue; var flag=window.confirm("您真的要删除["+str+"]吗?"); //点击"取消"按钮 if(!flag){ return false; } /*删除*********************************************/ //获取tbody var tbodyElement=aElement.parentNode.parentNode.parentNode; //获取tr var trElement=aElement.parentNode.parentNode; //删除 tbodyElement.removeChild(trElement); //使网页的链接失效 return false; } } </script>
3.获取表格中的第一列数据,并将值存储在数组中
<script charset="utf-8" type="text/javascript"> function btnSubmit(){ alert('hello'); var tableId=document.getElementById("usertable"); var str=""; alert(tableId.rows.length); var result=[]; for(var i=1;i<tableId.rows.length;i++){ alert(tableId.rows[i].cells[1].innerHTML); result.push(tableId.rows[i].cells[1].innerHTML); } } </script>
相关文章推荐
- JS实现的表格操作类详解(添加,删除,排序,上移,下移)
- 使用ajax来实现数据的添加删除查询并能操作表格
- 使用Bootstrap + Vue.js实现 添加删除数据
- JS 利用节点实现对表格的动态添加删除
- 动态添加删除表格行的js实现代码
- 动态添加删除表格行的js实现代码
- js实现添加删除表格(两种方法)
- js 实现的添加删除表格
- 使用JS实现简单的表格的增加删除全选反选以及高亮效果
- AngulrJS 表格查询-添加-下拉列表-删除的使用
- JS实现的表格操作类详解(添加,删除,排序,上移,下移)
- 使用js实现对table的动态添加、删除和更新
- js实现表格的添加和删除
- js动态添加表格数据使用insertRow和insertCell实现
- js实现动态添加、删除行、onkeyup表格求和示例
- 使用js实现表格增加与删除
- js实现添加删除表格的一行
- JS小功能(操作Table--动态添加删除表格及数据)实现代码
- JS小功能(操作Table--动态添加删除表格及数据)实现代码
- js实现表格的添加 删除 搜索和排序