天天看點
傳回

帶你學習JQuery：表格處理

最簡單的，普通隔行變色：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title></title>

<link href="css/style.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css" />

<!--   引入jQuery -->

<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>

<script type="text/javascript">

 $(function(){

  $("tr:odd").addClass("odd"); 

  $("tr:even").addClass("even");

 })

</script>

</head>

<body>

<table>

  <thead>

   <tr><th>姓名</th><th>性别</th><th>暫住地</th></tr>

  </thead>

  <tbody>

   <tr><td>張山</td><td>男</td><td>浙江甯波</td></tr>

   <tr><td>李四</td><td>女</td><td>浙江杭州</td></tr>

   <tr><td>王五</td><td>男</td><td>湖南長沙</td></tr>

   <tr><td>找六</td><td>男</td><td>浙江溫州</td></tr>

   <tr><td>Rain</td><td>男</td><td>浙江杭州</td></tr>

   <tr><td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>

  </tbody>

 </table>

</body>

</html>

稍微複雜一點：表頭不算，即排除表頭，JQuery代碼如下

<script type="text/javascript">

 $(function(){

  $("tbody>tr:odd").addClass("odd"); //先排除第一行,然後給奇數行添加樣式

  $("tbody>tr:even").addClass("even"); //先排除第一行,然後給偶數行添加樣式

 })

</script>

再複雜一些，讓某一行高亮顯示：

比如說讓王五這行高亮顯示：

<script type="text/javascript">

 $(function(){

  $("tbody>tr:odd").addClass("odd"); //先排除第一行,然後給奇數行添加樣式

  $("tbody>tr:even").addClass("even"); //先排除第一行,然後給偶數行添加樣式

  $("tr:contains('王五')").addClass("selected");

  })

</script>

再進一步，在第一列添加一列單選按鈕，單擊這一行時，高亮顯示，同時單選按鈕被選中

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title></title>

<link href="css/style.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css" />

<!--   引入jQuery -->

<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>

<script type="text/javascript">

 $(function(){

  $("tbody>tr:odd").addClass("odd"); //先排除第一行,然後給奇數行添加樣式

  $("tbody>tr:even").addClass("even"); //先排除第一行,然後給偶數行添加樣式

  $('tbody>tr').click(function() {

   $(this)

    .addClass('selected')

    .siblings().removeClass('selected')

    .end()//重新傳回到$(this)對象

    .find(':radio').attr('checked',true);

  });

  // 如果單選框預設情況下是選擇的，則高色.

   // $('table :radio:checked').parent().parent().addClass('selected');

  //簡化:

    $('table :radio:checked').parents("tr").addClass('selected');

         //再簡化:

   //$('tbody>tr:has(:checked)').addClass('selected');

 })

</script>

</head>

<body>

 <table>

  <thead>

   <tr><th> </th><th>姓名</th><th>性别</th><th>暫住地</th></tr>

  </thead>

  <tbody>

   <tr><td><input type="radio" name="choice" value=""/></td>

    <td>張山</td><td>男</td><td>浙江甯波</td></tr>

   <tr><td><input type="radio" name="choice" value="" /></td>

    <td>李四</td><td>女</td><td>浙江杭州</td></tr>

   <tr><td><input type="radio" name="choice" value="" checked='checked' /></td>

    <td>王五</td><td>男</td><td>湖南長沙</td></tr>

   <tr><td><input type="radio" name="choice" value="" /></td>

    <td>找六</td><td>男</td><td>浙江溫州</td></tr>

   <tr><td><input type="radio" name="choice" value="" /></td>

    <td>Rain</td><td>男</td><td>浙江杭州</td></tr>

   <tr><td><input type="radio" name="choice" value="" /></td>

    <td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>

  </tbody>

 </table>

</body>

</html>

再進一步，第一列變成複選框：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title></title>

<link href="css/style.css" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" target="_blank" rel="external nofollow" rel="stylesheet" type="text/css" />

<!--   引入jQuery -->

<script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>

<script type="text/javascript">

 $(function(){

  $("tbody>tr:odd").addClass("odd"); //先排除第一行,然後給奇數行添加樣式

  $("tbody>tr:even").addClass("even"); //先排除第一行,然後給偶數行添加樣式

  $('tbody>tr').click(function() {

   if ($(this).hasClass('selected')) {

    $(this)

     .removeClass('selected')

     .find(':checkbox').attr('checked',false);

   }else{

    $(this)

     .addClass('selected')

     .find(':checkbox').attr('checked',true);

   }

  });

  // 如果複選框預設情況下是選擇的，則高色.

  // $('table :checkbox:checked').parent().parent().addClass('selected');

  //簡化:

  $('table :checkbox:checked').parents("tr").addClass('selected');

  //$('tbody>tr:has(:checked)').addClass('selected');

  })

</script>

</head>

<body>

 <table>

  <thead>

   <tr><th> </th><th>姓名</th><th>性别</th><th>暫住地</th></tr>

  </thead>

  <tbody>

   <tr><td><input type="checkbox" name="choice" value=""/></td>

    <td>張山</td><td>男</td><td>浙江甯波</td></tr>

   <tr><td><input type="checkbox" name="choice" value="" /></td>

    <td>李四</td><td>女</td><td>浙江杭州</td></tr>

   <tr><td><input type="checkbox" name="choice" value="" checked='checked' /></td>

    <td>王五</td><td>男</td><td>湖南長沙</td></tr>

   <tr><td><input type="checkbox" name="choice" value="" /></td>

    <td>找六</td><td>男</td><td>浙江溫州</td></tr>

   <tr><td><input type="checkbox" name="choice" value="" /></td>

    <td>Rain</td><td>男</td><td>浙江杭州</td></tr>

   <tr><td><input type="checkbox" name="choice" value="" /></td>

    <td>MAXMAN</td><td>女</td><td>浙江杭州</td></tr>

  </tbody>

 </table>

</body>

</html>

jquery stylesheet function xhtml table html
上一篇: [轉載]PHP isset()與empty()的使用差別詳解
下一篇: [轉]靈活軟體開發 需求分析

繼續閱讀