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

Posted 托马斯不拖马

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js获取表格单元格中的元素相关的知识,希望对你有一定的参考价值。

 

由于长时间没有练习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;
    }   

 

以上是关于js获取表格单元格中的元素的主要内容,如果未能解决你的问题,请参考以下文章

如何从表格视图单元格中的图像手势获取 indexPath

用JS自制表格软件玩数据8. 设计单元格中的右键菜单

用JS自制表格软件玩数据8. 设计单元格中的右键菜单

在表格单元格中获取/设置 UITextField 值

如何使用 XPath 获取特定表格单元格中的值

Firefox 忽略表格单元格中的绝对定位