您的位置:首页 > Web前端 > JavaScript

使用js实现表格的添加和删除

2017-03-29 14:19 417 查看
1.html界面中代码实现如下

<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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: