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 相关文章推荐
js验证表单第二部分
Nov 25 Javascript
jquery uaMatch源代码
Feb 14 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 Javascript
轻松实现js选项卡切换效果
Sep 24 Javascript
Parcel 打包示例(React HelloWorld)
Jan 16 Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
详解JavaScript事件循环机制
Sep 07 Javascript
vue使用laydate时间插件的方法
Nov 14 Javascript
浅谈vue异步数据影响页面渲染
Oct 29 Javascript
JavaScript大数相加相乘的实现方法实例
Oct 18 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
通过dbi使用perl连接mysql数据库的方法
2014/04/16 PHP
PHP新建类问题分析及解决思路
2015/11/19 PHP
js 页面关闭前的出现提示的实现代码
2011/05/25 Javascript
js实现的仿新浪微博完美的时间组件升级版
2011/12/20 Javascript
JS限制上传图片大小不使用控件在本地实现
2012/12/19 Javascript
jquery实现手机发送验证码的倒计时代码
2014/02/12 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
jquery中toggle函数交替使用问题
2015/06/22 Javascript
Javascript之Date对象详解
2016/06/07 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
聊一聊jQuery插件uploadify使用方法
2016/08/24 Javascript
Vue组件BootPage实现简单的分页功能
2016/09/12 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
AngularJS Toaster使用详解
2017/02/24 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
详解如何构建Promise队列实现异步函数顺序执行
2018/10/23 Javascript
vue强制刷新组件的方法示例
2019/02/28 Javascript
JavaScript中ES6规范中let和const的用法和区别
2020/08/06 Javascript
JavaScript实现点击切换功能
2021/01/27 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
Python3字符串学习教程
2015/08/20 Python
使用python将请求的requests headers参数格式化方法
2019/01/02 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
Python PyPDF2模块安装使用解析
2020/01/19 Python
Python+unittest+requests 接口自动化测试框架搭建教程
2020/10/09 Python
python Tornado框架的使用示例
2020/10/19 Python
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
优秀的计算机专业求职信范文
2013/12/27 职场文书
三年级学生评语
2014/04/23 职场文书
公司年终奖分配方案
2014/06/16 职场文书
初中体育教学随笔
2015/08/15 职场文书
班级元旦晚会开幕词
2016/03/04 职场文书
2016年少先队活动总结
2016/04/06 职场文书
Python 中的Sympy详细使用
2021/08/07 Python
在Python 中将类对象序列化为JSON
2022/04/06 Python