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

 更新时间:2016年10月13日 09:29:54   投稿:jingxian  
下面小编就为大家带来一篇js将table的每个td的内容自动赋值给其title属性的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

如下所示:

<!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缓存远程窃取Wi-Fi密码的思路详解

    利用JavaScript缓存远程窃取Wi-Fi密码的思路详解

    这篇文章主要介绍了利用JavaScript缓存远程窃取Wi-Fi密码的方法,本文通过实例代码相结合的形式给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • JS target与currentTarget区别说明

    JS target与currentTarget区别说明

    target在事件流的目标阶段;currentTarget在事件流的捕获,目标及冒泡阶段。只有当事件流处在目标阶段的时候,两个的指向才是一样的,而当处于捕获和冒泡阶段的时候,target指向被单击的对象而currentTarget指向当前事件活动的对象(一般为父级)。
    2011-08-08
  • Json文件格式化方法详解

    Json文件格式化方法详解

    JSON 属于文本,并且我们能够把任何 JavaScript 对象转换为 JSON,然后将 JSON 发送到服务器,这篇文章主要介绍了Json文件格式化方法,需要的朋友可以参考下
    2023-05-05
  • 24行JavaScript代码实现Redux的方法实例

    24行JavaScript代码实现Redux的方法实例

    这篇文章主要给大家介绍了关于如何利用24行JavaScript代码实现Redux的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用JavaScript具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-11-11
  • javascript实现平滑无缝滚动

    javascript实现平滑无缝滚动

    这篇文章主要为大家详细介绍了javascript实现平滑无缝滚动的具体代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • 微信小程序之数据缓存的实例详解

    微信小程序之数据缓存的实例详解

    这篇文章主要介绍了微信小程序之数据缓存的实例详解的相关资料,希望通过本文能帮助到大家,让大家掌握这部分内容,需要的朋友可以参考下
    2017-09-09
  • JS按条件 serialize() 对应标签的使用方法

    JS按条件 serialize() 对应标签的使用方法

    serialize()方法通过序列化表单值,创建标准的URL编码文本字符串,它的操作对象是代表表单元素集合的jQuery 对象。下面通过本文给大家介绍JS按条件 serialize() 对应标签的相关知识,感兴趣的的朋友一起看看吧
    2017-07-07
  • Javascript中Object和Map之间的转换方法

    Javascript中Object和Map之间的转换方法

    在许多编程语言中,Object和Map都是用于存储键值对的数据结构,下面这篇文章主要给大家介绍了关于Javascript中Object和Map之间的转换方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-06-06
  • JS获取填报扩展单元格控件的值的解决办法

    JS获取填报扩展单元格控件的值的解决办法

    这篇文章主要介绍了JS获取填报扩展单元格控件的值的解决办法,需要的朋友可以参考下
    2017-07-07
  • 基于Bootstrap框架菜鸟入门教程(推荐)

    基于Bootstrap框架菜鸟入门教程(推荐)

    下面小编就为大家带来一篇基于Bootstrap框架菜鸟入门教程(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

最新评论