JS实现控制表格单元格垂直对齐的方法

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

下面的代码控制指定的单元格靠底部垂直对齐

<!DOCTYPE html>
<html>
<head>
<script>
function valignCell()
{
var x=document.getElementById('myTable').rows[0].cells;
x[0].vAlign="bottom";
}
</script>
</head>
<body>
<table id="myTable" border="1" height="70%">
<tr>
<td>First cell</td>
<td>Second cell</td>
</tr>
<tr>
<td>Third cell</td>
<td>Fourth cell</td>
</tr>
</table>
<form>
<input type="button" onclick="valignCell()"
value="Vertical align cell content">
</form>
</body>
</html>

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

赞 (0)

相关推荐

  • JS实现控制表格内指定单元格内容对齐的方法

    本文实例讲述了JS实现控制表格内指定单元格内容对齐的方法.分享给大家供大家参考.具体如下: 下面的代码控制表格单元格的内容向右对齐 <!DOCTYPE html> <html> <head> <script> function alignCell() { document.getElementById('td1').align="right"; } </script> </head> <body> &l

  • JS实现向表格行添加新单元格的方法

    本文实例讲述了JS实现向表格行添加新单元格的方法.分享给大家供大家参考.具体如下: 下面的JS代码可以想表格中指定id的行插入新的单元格 <!DOCTYPE html> <html> <head> <script> function insCell() { var x=document.getElementById('tr1').insertCell(0); x.innerHTML="The famous"; } </script&

  • js生成动态表格并为每个单元格添加单击事件的方法

    html: 复制代码 代码如下: <html> <head> <title>Demo</title> </head> <body> <label style="font-size:20px;width:600px;" >动态表格:</label><br/> <table border="1"> <tbody id="table&qu

  • js获取单元格自定义属性值的代码(IE/Firefox)

    复制代码 代码如下: // js取单元格自定义属性值,IE和FF下的不同实现 result+="<Item>" var isIE=document.all ? true : false; if(isIE)//IE { for (var i=0;i<obj.cells.length;i++) result+="<"+obj.cells[i].fieldname+"><![CDATA["+$(obj.cells[i

  • JS获取表格内指定单元格html内容的方法

    本文实例讲述了JS获取表格内指定单元格html内容的方法.分享给大家供大家参考.具体如下: 下面的代码先通过表格对象的rows获得指定的行的所有单元格数组,然后定位指定的单元格,通过单元格的innerHTML属性获得单元格的html内容 <!DOCTYPE html> <html> <head> <script> function cell() { var x=document.getElementById('myTable').rows[0].cells;

  • JS获取单击按钮单元格所在行的信息

    用JS获取表格中单击某个单元格中按钮,得到所在行的信息: 复制代码 代码如下: function GetRowNo() { var e = e || window.event; var target = e.target || e.srcElement; if (target.parentNode.tagName.toLowerCase() == "td") { rowIndex = target.parentNode.parentNode.rowIndex; } }

  • JS实现控制表格单元格垂直对齐的方法

    本文实例讲述了JS实现控制表格单元格垂直对齐的方法.分享给大家供大家参考.具体如下: 下面的代码控制指定的单元格靠底部垂直对齐 <!DOCTYPE html> <html> <head> <script> function valignCell() { var x=document.getElementById('myTable').rows[0].cells; x[0].vAlign="bottom"; } </script>

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

    本文实例讲述了JS实现控制表格行内容垂直对齐的方法.分享给大家供大家参考.具体分析如下: 下面的代码通过表格的vAlign属性控制表格行的内容垂直对齐,可以置顶.可以居中.可以底部对齐 <!DOCTYPE html> <html> <head> <script> function topAlign() { document.getElementById('tr2').vAlign="top"; } </script> <

  • JS实现控制表格行文本对齐的方法

    本文实例讲述了JS实现控制表格行文本对齐的方法.分享给大家供大家参考.具体如下: 下面的JS代码可以控制表格内的整行文本向左或者向右对齐 <!DOCTYPE html> <html> <head> <script> function leftAlign() { document.getElementById('header').align="left"; } </script> </head> <body&g

  • jQuery实现HTML表格单元格的合并功能

    jQuery实现HTML表格单元格的合并功能

    本文实例讲述了jQuery实现HTML表格单元格合并的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 合并前: 合并后: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.

  • jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】

    jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】

    本文实例讲述了jQuery实现点击表格单元格就可以编辑内容的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!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/

  • 表格单元格交错着色实现思路及代码

    表格单元格交错着色实现思路及代码

    [Title][原]表格单元格交错着色 [Abstract]以空间换时间,循环确定所着颜色. [Environment]jQuery [Author]wintys (wintys@gmail.com) http://wintys.cnblogs.com [Content]: 1.效果  2.问题描述 对如下表格中的单元格进行交错着色.表格中HTML标签.内容已定. 复制代码 代码如下: <div id="tablecontainer" align="center&quo

  • jQuery实现合并表格单元格中相同行操作示例

    jQuery实现合并表格单元格中相同行操作示例

    本文实例讲述了jQuery实现合并表格单元格中相同行操作.分享给大家供大家参考,具体如下: 合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列 }) /** * 操作表格 合并单元格 行 * 2016年12月13日16:00:41 */ (function($) { // 看过jquery源码就可以发现$.fn就是$.prototype, 只是为了兼容早期版本的插件 // 才保留了jQuery.prototype这个形式 $.f

  • JavaScript动态改变表格单元格内容的方法

    本文实例讲述了JavaScript动态改变表格单元格内容的方法.分享给大家供大家参考.具体如下: JavaScript动态改变表格单元格的内容,下面的代码通过修改单元格的innerHTML来修改单元格内容 <!DOCTYPE html> <html> <head> <script> function changeContent() { var x=document.getElementById('myTable').rows[0].cells; x[0].i

随机推荐