脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS表格行内容垂直对齐

JS实现控制表格行内容垂直对齐的方法

 更新时间：2015年03月30日 15:06:09   作者：欧阳不疯  
这篇文章主要介绍了JS实现控制表格行内容垂直对齐的方法,通过javascript的getElementById获取元素并设置其相应样式来实现这一功能,需要的朋友可以参考下

本文实例讲述了JS实现控制表格行内容垂直对齐的方法。分享给大家供大家参考。具体分析如下：

下面的代码通过表格的vAlign属性控制表格行的内容垂直对齐，可以置顶、可以居中、可以底部对齐

<!DOCTYPE html>
<html>
<head>
<script>
function topAlign()
{
document.getElementById('tr2').vAlign="top";
}
</script>
</head>
<body>
<table width="50%" border="1">
<tr id="tr1">
<th>Firstname</th>
<th>Lastname</th>
<th>Text</th>
</tr>
<tr id="tr2">
<td>Peter</td>
<td>Griffin</td>
<td>Hello my name is Peter Griffin.
I need a long text for this example.
I need a long text for this example.</td>
</tr>
</table>
<br>
<input type="button" onclick="topAlign()" value="Top-align table row" />
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

您可能感兴趣的文章:

相关文章

  • 基于ssm框架实现layui分页效果

    基于ssm框架实现layui分页效果

    这篇文章主要为大家详细介绍了基于ssm框架实现layui分页效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-07-07
  • 使用onbeforeunload属性后的副作用

    使用onbeforeunload属性后的副作用

    使用onbeforeunload属性后的副作用...
    2007-03-03
  • javascript判断变量是否有值的方法

    javascript判断变量是否有值的方法

    这篇文章主要介绍了javascript判断变量是否有值的方法,可实现有效判断值的功能,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • JavaScript实现弹出模态窗体并接受传值的方法

    JavaScript实现弹出模态窗体并接受传值的方法

    这篇文章主要介绍了JavaScript实现弹出模态窗体并接受传值的方法,涉及JavaScript模态窗体的实现及基于URL的传值操作技巧,需要的朋友可以参考下
    2016-02-02
  • xmlplus组件设计系列之文本框（TextBox)（3）

    xmlplus组件设计系列之文本框（TextBox)（3）

    xmlplus 是一个JavaScript框架，用于快速开发前后端项目。这篇文章主要介绍了xmlplus组件设计系列之文本框，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • JavaScript学习笔记之创建对象

    JavaScript学习笔记之创建对象

    在JavaScript中对象是一种基本的数据类型，在数据结构上是一种散列表，可以看作是属性的无序集合，除了原始值其他一切都是对象。这篇文章主要给大家介绍JavaScript学习笔记之创建对象，需要的朋友参考下吧
    2016-03-03
  • 巧用Javascript的逻辑运算符

    巧用Javascript的逻辑运算符

    本篇文章主要介绍了Javascript逻辑运算符"或"的巧用实例，希望对大家有所帮助，下面就随小编一起来看看吧
    2016-12-12
  • JavaScript作用域与作用域链深入解析

    JavaScript作用域与作用域链深入解析

    这篇文章主要是对JavaScript作用域和作用域链作简单的介绍，希望能帮助大家更好的学习JavaScript
    2013-12-12
  • Bootstrap面板使用方法

    Bootstrap面板使用方法

    面板样式除了内容之外，还有一个面板头部可以添加标题，让我们通过这篇文章看看Bootstrap面板样式的使用方法
    2017-01-01
  • JavaScript中reduce方法的用法及使用场景

    JavaScript中reduce方法的用法及使用场景

    reduce()方法对数组中的每个元素按序执行一个提供的reducer函数,每一次运行 reducer会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值,今天我们就介绍一下reduce的几种简单使用场景,需要的朋友可以参考下
    2023-08-08

最新评论