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 相关文章推荐
jQuery 表格工具集
Apr 25 Javascript
关于jquery动态增减控件的一些想法和小插件
Aug 01 Javascript
得到jQuery detach()后节点中的某个值实现代码
Feb 05 Javascript
利用浏览器全屏api实现js全屏
Jan 16 Javascript
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
关注jquery技巧提高jquery技能(前端开发必学)
Nov 02 Javascript
浅析BootStrap Treeview的简单使用
Oct 12 Javascript
node文件批量重命名的方法示例
Oct 23 Javascript
Thinkjs3新手入门之添加一个新的页面
Dec 06 Javascript
package.json各个属性说明详解
Mar 11 Javascript
JavaScript实现横版菜单栏
Mar 17 Javascript
Vue跨域请求问题解决方案过程解析
Aug 07 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标签云的实现代码
2012/10/10 PHP
php实现zip文件解压操作
2015/11/03 PHP
php短信接口代码
2016/05/13 PHP
基于php判断客户端类型
2016/10/14 PHP
php基于curl重写file_get_contents函数实例
2016/11/08 PHP
Laravel使用PHPQRCODE实现生成带有LOGO的二维码图片功能示例
2017/07/07 PHP
Laravel 登录后清空COOKIE的操作方法
2019/10/14 PHP
PHP Swoole异步MySQL客户端实现方法示例
2019/10/24 PHP
JavaScript DOM 学习第九章 选取范围的介绍
2010/02/19 Javascript
基于jquery的一个图片hover的插件
2010/04/24 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
2011/10/26 Javascript
JavaScript地图拖动功能SpryMap的简单实现
2013/07/17 Javascript
用javascript添加控件自定义属性解析
2013/11/25 Javascript
如何在指定的地方插入html内容和文本内容
2013/12/23 Javascript
JS实现控制表格行文本对齐的方法
2015/03/30 Javascript
概述一个页面从输入URL到页面加载完的过程
2016/12/16 Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
2017/01/08 Javascript
微信小程序 登陆流程详细介绍
2017/01/17 Javascript
微信小程序 图片绝对定位(背景图片)
2017/04/05 Javascript
浅谈node中的exports与module.exports的关系
2017/08/01 Javascript
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
python实现查询苹果手机维修进度
2015/03/16 Python
Python学习小技巧之利用字典的默认行为
2017/05/20 Python
Python基于百度AI的文字识别的示例
2018/04/21 Python
python实现批量图片格式转换
2020/06/16 Python
Python实现栈和队列的简单操作方法示例
2019/11/29 Python
python单例设计模式实现解析
2020/01/07 Python
pytorch三层全连接层实现手写字母识别方式
2020/01/14 Python
阿迪达斯比利时官方商城:adidas比利时
2016/10/10 全球购物
加拿大健康、婴儿和美容产品在线购物:Well.ca
2016/11/30 全球购物
保密承诺书范文
2014/03/27 职场文书
个人整改措施书面材料
2014/10/24 职场文书
2015国庆节66周年演讲稿
2015/03/20 职场文书
教师节大会主持词
2015/07/06 职场文书
《王国之心》迎来了发售的20周年, 野村哲发布贺图
2022/04/11 其他游戏