js将table的每个td的内容自动赋值给其title属性的方法


Posted in Javascript onOctober 13, 2016

如下所示:

<!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/1999/xhtml">
<head>
<title>将table的每个td的内容自动赋值给其title属性</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<style type="text/css">
.tbStyle td{
  border:1px solid #F00
}
.tbStyle th{
  border:1px solid #F00
}
</style>
<script src="jquery-1.10.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  //table的最后一列不给其title赋值
  var cellIndex=parseInt($(".tbStyle th").length)-1;
  $(".tbStyle tr td").each(function(){
    if(this.cellIndex != cellIndex){
      $(this).attr("title",$(this).text());
      //alert($(this).parent().get(0).rowIndex);输出所在行
     }
  });
});
</script>
</head>
<body>
  <table class="tbStyle">
    <tr>
      <th>第一列</th>
      <th>第二列</th>
      <th>第三列</th>
      <th>第四列</th>
    </tr>
    <tr>
      <td>aaaaaaa</td>
      <td>bbbbbbb</td>
      <td>ccccccc</td>
      <td>ddddddd</td>
    </tr>
    <tr>
      <td>eeeeeee</td>
      <td>fffffff</td>
      <td>ggggggg</td>
      <td>hhhhhhh</td>
    </tr>
    <tr>
      <td>iiiiiii</td>
      <td>jjjjjjj</td>
      <td>kkkkkkk</td>
      <td>lllllll</td>
    </tr>
  </table>
</body>
</html>

以上就是小编为大家带来的js将table的每个td的内容自动赋值给其title属性的方法全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
使用javascipt---实现二分查找法
Apr 10 Javascript
javascript中的startWith和endWith的几种实现方法
May 07 Javascript
基于豆瓣API+Angular开发的web App
Jan 02 Javascript
javascript解决IE6下hover问题的方法
Jul 28 Javascript
jquery获取url参数及url加参数的方法
Oct 26 Javascript
用vue写一个仿简书的轮播图的示例代码
Mar 13 Javascript
Vue中使用Sortable的示例代码
Apr 07 Javascript
原生JS实现DOM加载完成马上执行JS代码的方法
Sep 07 Javascript
VUE实现移动端列表筛选功能
Aug 23 Javascript
JavaScript canvas绘制渐变颜色的矩形
Feb 18 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 Javascript
Typescript类型系统FLOW静态检查基本规范
May 25 Javascript
jquery获取点击控件的绝对位置简单实例
Oct 13 #Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 #Javascript
Node.js中常规的文件操作总结
Oct 13 #Javascript
BootStrap实现手机端轮播图左右滑动事件
Oct 13 #Javascript
js图片切换具体实现代码
Oct 13 #Javascript
微信小程序 rpx 尺寸单位详细介绍
Oct 13 #Javascript
jquery实现图片切换代码
Oct 13 #Javascript
You might like
PHP 面向对象程序设计(oop)学习笔记(三) - 单例模式和工厂模式
2014/06/12 PHP
thinkphp判断访客为手机端或PC端的方法
2014/11/24 PHP
php打造智能化的柱状图程序,用于报表等
2015/06/19 PHP
php设计模式之委托模式
2016/02/13 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
PHP实现的迪科斯彻(Dijkstra)最短路径算法实例
2017/09/16 PHP
javascript下数值型比较难点说明
2010/06/07 Javascript
无缝滚动改进版支持上下左右滚动(封装成函数)
2012/12/04 Javascript
js使用for循环与innerHTML获取选中tr下td值
2014/09/26 Javascript
jQuery后代选择器用法实例
2014/12/23 Javascript
javascript异步处理工作机制详解
2015/04/13 Javascript
node.js抓取并分析网页内容有无特殊内容的js文件
2015/11/17 Javascript
JavaScript手机振动API
2016/06/11 Javascript
JavaScript操作表单实例讲解(上)
2016/06/20 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
详谈ES6中的迭代器(Iterator)和生成器(Generator)
2017/07/31 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
2019/05/30 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
Python+selenium 获取浏览器窗口坐标、句柄的方法
2018/10/14 Python
css3 box-shadow阴影(外阴影与外发光)图示讲解
2017/08/11 HTML / CSS
商务英语本科生的自我评价分享
2013/11/15 职场文书
写给保洁员表扬信
2014/01/08 职场文书
yy结婚证婚词
2014/01/10 职场文书
化学系大学生自荐信范文
2014/03/01 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
商务专员岗位职责范本
2014/06/29 职场文书
俞敏洪一分钟演讲稿
2014/08/26 职场文书
2014年文艺部工作总结
2014/11/17 职场文书
保证书格式
2015/01/16 职场文书
高考升学宴答谢词
2015/01/20 职场文书
新闻稿标题
2015/07/18 职场文书
2016八一建军节慰问信
2015/11/30 职场文书
Python数据分析入门之教你怎么搭建环境
2021/05/13 Python