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

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

下面的代码控制表格单元格的内容向右对齐

<!DOCTYPE html>
<html>
<head>
<script>
function alignCell()
{
document.getElementById('td1').align="right";
}
</script>
</head>
<body>
<table border="1">
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td id="td1">Peter</td>
<td id="td2">Griffin</td>
</tr>
</table>
<br>
<input type="button" onclick="alignCell()" value="Align cell" />
</body>
</html>

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

赞 (0)

相关推荐

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

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

  • 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实现向表格行添加新单元格的方法

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

  • 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获取单元格自定义属性值的代码(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实现控制表格内指定单元格内容对齐的方法

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

  • 在Layui中操作数据表格,给指定单元格添加事件示例

    最近入坑Layui这个为服务端程序员量身定做的前端框架. 为什么不用vue结合各种流行前端框架Element.iView啊什么,后台大哥们不会啊!!! 只好我来迁就他们呢,还得一点一点儿的学起来. 当我们在操作数据表格的时候,并不是一定要点击表格工具栏中的"查看"按钮,来进行查看,而是点击某一特定的列来进行某些数据查看.例如下图这样. 这就涉及到表格的自定义事件.代码如下: <table id='task-list' lay-filter='task-list'></

  • JS实现table表格内针对某列内容进行即时搜索筛选功能

    JS实现table表格内针对某列内容进行即时搜索筛选功能

    本文实例讲述了JS实现table表格内针对某列内容进行即时搜索筛选功能.分享给大家供大家参考,具体如下: 往往有些时候,我们把数据从数据库读取出来,显示到table里面,而此时来了个新需求,要在一个搜索框内输入关键字,表格的内容进行即时的筛选. 而即时触发进行数据库的查询,再回调显示,就显得慢,拖累服务器,降低用户体验度,这时,要是有个纯js操作,进行表格某列的即时筛选,这样既能提高搜索速度,也不用占用服务器资源,用户自然也满意. 实现如下,先看效果图, 开始状态: 在输入框内输入'e',表格即

  • JS与jQuery遍历Table所有单元格内容的方法

    本文实例讲述了JS与jQuery遍历Table所有单元格内容的方法.分享给大家供大家参考,具体如下: 用JS去遍历Table的所有单元格中的内容,可以用如下JS代码实现: function GetInfoFromTable(tableid) { var tableInfo = ""; var tableObj = document.getElementById(tableid); for (var i = 0; i < tableObj.rows.length; i++) { /

  • jQuery获取table行数并输出单元格内容的实现方法

    本文实例讲述了jQuery获取table行数并输出单元格内容.分享给大家供大家参考,具体如下: js部分: <script language="javascript" type="text/javascript"> $(function() { $("#txtInput").attr("value", "90"); var v_temp = $("#lblMessage").

  • JS显示表格内指定行html代码的方法

    本文实例讲述了JS显示表格内指定行html代码的方法.分享给大家供大家参考.具体如下: 下面的js代码演示了如何通过表格的rows数组获得指定行的html代码,包含了所有列 <!DOCTYPE html> <html> <head> <script> function showRow() { alert(document.getElementById('myTable').rows[0].innerHTML); } </script> </

  • js遍历获取表格内数据的方法(必看)

    本文将介绍如何使用js获取表格内某一单元格的内容,表格由table,tr,td等html标记组成.table表示表格,tr表示行,td表示行中列. 1.一般的表格结构如下 <table> <tr> <td>id</td> <td>name</td> </tr> <tr> <td>1</td> <td>fdipzone</td> </tr> <tr

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

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

随机推荐