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(){
     
}

<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;
    }

原文链接：https://www.cnblogs.com/hnzyyTl/p/7119193.html

js获取表格单元格中的元素

猜你喜欢