由於長時間沒有練習javaScript的代碼，導致現在用起來相當的生疏，前幾天要簡單的取個表格的元素值，花了很長的時間，這里復習下
功能：點擊取值，打印編碼，書名
js代碼如下：
<script type="text/javascript">
var table_main = function(){};
//加載頁面信息
table_main.loadpage = function(){
};
//點擊操作
table_main.deletetr = function(btn){
//獲取當前單元格的值
var value = btn.tagName;
alert("當前元素："+btn.tagName);
alert("上一個節點："+btn.parentNode.tagName);
alert("第一個單元格的值："+btn.parentNode.parentNode.firstChild.nextSibling.textContent);
alert("第一個單元格的值,方法二："+btn.parentNode.parentNode.cells[0].innerHTML);
alert("第二個單元格的值："+btn.parentNode.parentNode.firstChild.nextSibling.nextSibling.nextSibling.textContent);
alert("第二個單元格的值,方法二："+btn.parentNode.parentNode.cells[1].innerHTML);
}
//保存操作
table_main.savetr = function(){
}
html代碼如下：
<body> <div id="" style=""> <table id="table" class="tableClass"> <thead> <th>編碼</th> <th>書名</th> <th>出版社</th> <th>出版時間</th> <th>操作</th> </thead> <tbody> <tr> <td>9872</td> <td>新華字典</td> <td>新華出版社</td> <td>2011-09-13</td> <td><a onclick="table_main.deletetr(this)">點擊取值</a></td> </tr> <tr> <td>9875</td> <td>射雕英雄傳</td> <td>新華出版社</td> <td>2016-11-21</td> <td><a onclick="table_main.deletetr(this)">點擊取值</a></td> </tr> <tr> <td>9879</td> <td>大學物理</td> <td>機械工業出版社</td> <td>2017-01-13</td> <td><a onclick="table_main.deletetr(this)">點擊取值</a></td> </tr> </tbody> </table> </div> </body>
另外，css居中
水平居中
/* 水平居中 */ .tableRowCenter{ margin: 0 auto; }
垂直居中，利用絕對位置，設置了高度200px，再利用盒子-100px
/* 垂直居中 */ .tableColCenter{ position:absolute; top:50%; margin-top: -100px; height: 200px; }
水平垂直居中，利用絕對位置，設置寬度高度，left:50%,top:50%,再利用盒子調整位置
/* 水平垂直居中 */ .tableClass{ top:50%; left: 50%; width:400px; height:100px; margin-left: -200px; margin-top: -100px; position: absolute; }