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 相关文章推荐
JavaScript 学习技巧
Feb 17 Javascript
javascript处理table表格的代码
Dec 06 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
Aug 11 Javascript
d3.js实现简单的网络拓扑图实例代码
Nov 06 Javascript
微信小程序之仿微信漂流瓶实例
Dec 09 Javascript
浅述节点的创建及常见功能的实现
Dec 15 Javascript
JS实现图片预加载之无序预加载功能代码
May 12 Javascript
jQuery实现锚点向下平滑滚动特效示例
Aug 29 jQuery
vue axios请求拦截实例代码
Mar 29 Javascript
javascript实现自由编辑图片代码详解
Jun 21 Javascript
Vue实现日历小插件
Jun 26 Javascript
基于Element的组件改造的树形选择器(树形下拉框)
Feb 27 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/11/13 PHP
PHP中数组定义的几种方法
2013/09/01 PHP
php的ajax简单实例
2014/02/27 PHP
PHP+jquery+CSS制作头像登录窗(仿QQ登陆)
2016/10/20 PHP
php经典趣味算法实例代码
2020/01/21 PHP
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
Javascript实现CheckBox的全选与取消全选的代码
2010/07/20 Javascript
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
js将控件隐藏的方法及display属性介绍
2013/07/04 Javascript
使用JQuery快速实现Tab的AJAX动态载入(实例讲解)
2013/12/11 Javascript
ExtJS如何设置与获取radio控件的选取状态
2014/01/22 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
三种AngularJS中获取数据源的方式
2016/02/02 Javascript
jquery实现界面无刷新加载登陆注册
2016/07/30 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
Angular2下使用pdf插件的方法详解
2017/04/29 Javascript
ReactJS实现表单的单选多选和反选的示例
2017/10/13 Javascript
更改BootStrap popover的默认样式及popover简单用法
2018/09/13 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
[28:05]完美世界DOTA2联赛循环赛Inki vs DeMonsTer 第一场 10月30日
2020/10/31 DOTA
将Django使用的数据库从MySQL迁移到PostgreSQL的教程
2015/04/11 Python
Python中内置的日志模块logging用法详解
2016/07/12 Python
Python实现对百度云的文件上传(实例讲解)
2017/10/21 Python
pandas中的DataFrame按指定顺序输出所有列的方法
2018/04/10 Python
使用pycharm生成代码模板的实例
2018/05/23 Python
爬虫代理池Python3WebSpider源代码测试过程解析
2019/12/20 Python
详解Python的三种拷贝方式
2020/02/11 Python
QML实现钟表效果
2020/06/02 Python
html5 实现客户端验证上传文件的大小(简单实例)
2016/05/15 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
建筑节能汇报材料
2014/08/22 职场文书
行政执法队伍作风整顿个人剖析材料
2014/10/11 职场文书
成绩报告单家长评语
2014/12/30 职场文书
违反纪律检讨书范文
2015/05/07 职场文书
迎国庆主题班会
2015/08/17 职场文书