您的位置：首页 > 其它

DOM操作表格

2017-01-07 16:38 225 查看

DOM操作表格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>使用HTML DOM操作表格</title>

<style type="text/css">

body{

font-size:13px;

line-height:25px;

}

table{

border-top: 1px solid #333;

border-left: 1px solid #333;

width:300px;

}

td{

border-right: 1px solid #333;

border-bottom: 1px solid #333;

}

.center{

text-align:center;

}

.title{

text-align:center;

font-weight:bold;

background-color: #cccccc;

}



</style>

<script type="text/javascript">

window.onload =function(){

  var b1 = document.getElementById("b1");

  var b2 = document.getElementById("b2");

  var b3 = document.getElementById("b3");

  var myTable = document.getElementById("myTable");

  b1.onclick = function(){

   var rownum = myTable.rows.length;

   var rows = myTable.insertRow(rownum);

   var cell1 = rows.insertCell(0);

   var cell2 = rows.insertCell(1);

   cell1.innerHTML = "西游记";

   cell2.innerHTML = "<input id='b4' type='button' onclick='deletes(this)' value='删除'/>";

   cell2.align = "center";

  }

  b2.onclick = function(){

   myTable.deleteRow(1);



  }



  b3.onclick = function(){

   var rows = myTable.rows[0];

   if(b3.value == "恢复！"){

    b3.value = "修改标题";

    rows.className = "";

   }else{

    b3.value = "恢复！";

    rows.className = "title";

   }



  }









}

function deletes(obj){

  var rownum = obj.parentNode.parentNode.rowIndex;

  var myTable = document.getElementById("myTable");

  myTable.deleteRow(rownum);



}

</script>

</head>

<body>

<table border="0" cellspacing="0" cellpadding="0" id="myTable">

<tr id="row1">

    <td>书名</td>

    <td>价格</td>

</tr>

<tr id="row2">

    <td>看得见风景的房间</td>

    <td class="center">¥30.00</td>

</tr>

<tr id="row3">

    <td>60个瞬间</td>

    <td class="center">¥32.00</td>

</tr>

</table>

<input id="b1" type="button" value="增加一行" />

<input id="b2" type="button" value="删除第2行" />

<input id="b3" type="button" value="修改标题"/>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： dom 表格

相关文章推荐

新的分享

章节导航