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 强制类型转换函数
May 17 Javascript
JavaScript 变量作用域分析
Jul 04 Javascript
javascript之典型高阶函数应用介绍二
Jan 10 Javascript
jQuery+css实现百度百科的页面导航效果
Dec 16 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 Javascript
jQuery实现冻结表格行和列
Apr 29 Javascript
Javascript中call,apply,bind方法的详解与总结
Dec 12 Javascript
详解Vue 实例中的生命周期钩子
Mar 21 Javascript
vue实现动态列表点击各行换色的方法
Sep 13 Javascript
js作用域和作用域链及预解析
Apr 11 Javascript
vue.js购物车添加商品组件的方法
Sep 17 Javascript
vue 路由守卫(导航守卫)及其具体使用
Feb 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
长波知识介绍
2021/03/01 无线电
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
php中使用preg_replace函数匹配图片并加上链接的方法
2013/02/06 PHP
gearman管理工具GearmanManager的安装与php使用方法示例
2020/02/27 PHP
Javascript miscellanea -display data real time, using window.status
2007/01/09 Javascript
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
js修改table中Td的值(定义td的单击事件)
2013/01/10 Javascript
jQuery中的编程范式详解
2014/12/15 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
node学习记录之搭建web服务器教程
2017/02/16 Javascript
js判断PC端与移动端跳转
2020/12/24 Javascript
基于JavaScript实现的快速排序算法分析
2017/04/14 Javascript
react.js 父子组件数据绑定实时通讯的示例代码
2017/09/25 Javascript
Vue $emit $refs子父组件间方法的调用实例
2018/09/12 Javascript
详解小程序横屏方案对比
2020/06/28 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
零基础写python爬虫之使用Scrapy框架编写爬虫
2014/11/07 Python
通过Python 获取Android设备信息的轻量级框架
2017/12/18 Python
Python实现霍夫圆和椭圆变换代码详解
2018/01/12 Python
Python实现简单生成验证码功能【基于random模块】
2018/02/10 Python
Python实现分段线性插值
2018/12/17 Python
python实现文件的备份流程详解
2019/06/18 Python
Python中模块(Module)和包(Package)的区别详解
2019/08/07 Python
python [:3] 实现提取数组中的数
2019/11/27 Python
Python使用指定字符长度切分数据示例
2019/12/05 Python
pycharm的python_stubs问题
2020/04/08 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
处理textarea中的换行和空格
2019/12/12 HTML / CSS
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
房屋租赁协议书
2014/04/10 职场文书
2014班子“三严三实”对照检查材料思想汇报
2014/09/18 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
2015年度对口支援工作总结
2015/07/22 职场文书
使用python绘制分组对比柱状图
2022/04/21 Python
java获取一个文本文件的编码(格式)信息
2022/09/23 Java/Android