집 > 기사 > 웹 프론트엔드 > 테이블의 각 td 내용을 title 속성에 자동으로 할당하는 js 메소드

테이블의 각 td 내용을 title 속성에 자동으로 할당하는 js 메소드

高洛峰원래의: 2016-12-29 16:31:552057검색

아래와 같습니다.

<!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>

위 내용은 테이블의 각 TD 내용을 title 속성에 자동으로 할당하기 위해 편집기에서 가져온 js 메소드의 전체 내용입니다. 지원하세요~

테이블의 각 td 내용을 title 속성에 자동으로 할당하는 더 많은 js 메소드를 보려면 PHP 중국어 웹사이트에서 관련 기사를 참고하세요!

성명：

이전 기사：테이블에 값을 할당하는 js의 예제 코드다음 기사：테이블에 값을 할당하는 js의 예제 코드