为特定单元格添加样式

2017-06-26 18:17:00
admin
原创
574
<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Selected Shakespeare Plays</title>

    <style>
		.horizontal { float: left;

                      list-style: none; margin: 10px;
         }
        .sub-level { background: #ccc;

         }

		
		tr {
background-color: #fff;
}
.alt {
background-color: #ccc;
}
.highlight {font-weight:bold; font-style:italic; }
		
	</style>

    <script src="http://code.ybao.org/js/jquery.js"></script>
    <script>
	$(document).ready(function() {
     
		$('tr:nth-child(odd)').addClass('alt');
		$('td:contains(Henry)').next().addClass('highlight');
    });
	</script>
  </head>
  <body>
    <div id="container">
     
      <h2>Shakespeare's Plays</h2>
      <table>
        <tr>
          <td>As You Like It</td>
          <td>Comedy</td>
          <td></td>
        </tr>
        <tr>
          <td>All's Well that Ends Well</td>
          <td>Comedy</td>
          <td>1601</td>
        </tr>
        <tr>
          <td>Hamlet</td>
          <td>Tragedy</td>
          <td>1604</td>
        </tr>
        <tr>
          <td>Macbeth</td>
          <td>Tragedy</td>
          <td>1606</td>
        </tr>
        <tr>
          <td>Romeo and Juliet</td>
          <td>Tragedy</td>
          <td>1595</td>
        </tr>
        <tr>
          <td>Henry IV, Part I</td>
          <td>History</td>
          <td>1596</td>
        </tr>
        <tr>
          <td>Henry V</td>
          <td>History</td>
          <td>1599</td>
        </tr>
      </table>
      <h2>Shakespeare's Sonnets</h2>
      <table>
        <tr>
          <td>The Fair Youth</td>
          <td>1–126</td>
        </tr>
        <tr>
          <td>The Dark Lady</td>
          <td>127–152</td>
        </tr>
        <tr>
          <td>The Rival Poet</td>
          <td>78–86</td>
        </tr>
      </table>
    </div>
  </body>
</html>
  • QQ讨论群
  • 关注微信
    • 欢迎咨询
    • 欢迎加入QQ群 16506021
  • 公众号:源宝网络