【jQuery】jQuery操作DOM —— 示例

来源：互联网发布：金山画王软件大小编辑：程序博客网时间：2024/05/05 16:19
示例1:

数据删除和图片浏览
listManager.html
<html>  <head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  <script language="javascript" type="text/javascript"             src="Jscript/jquery-1.11.1.js">    </script>  <style>    body{font-size: 12px}    table{width: 360px;border-collapse: collapse;}    table tr th, td{border: solid 1px #666;text-align: center;}    table tr td img{border: solid 1px #ccc;                    padding: 3px;width: 42px;height: 60px;cursor: hand}    table tr td span{float: left;padding-left: 12px;}    table tr th{background-color: #ccc;height: 32px}    .clsImg{position: absolute;border: solid 1px #ccc;            padding: 3px;width: 85px;height: 120px;            background-color: #eee;display: none;}    .bnt{border: #666 1px solid;padding: 2px;width: 50px;}  </style>    <script type="text/javascript">          $(function(){            $("table tr:nth-child(odd)").css("background-color", "#eee");                      $("#chkAll").click(function(){              if (this.checked){                $("table tr td input[type=checkbox]").prop("checked",this.checked);              } else{                $("table tr td input[type=checkbox]").prop("checked",this.checked);              }             });            $("#btnDel").click(function(){              var c = $("table tr td input[type=checkbox]:not('#chkAll')");              if (c.length != 0){                c.each(function(index){                  if (this.checked){                    $("table tr[id=" + this.value + "]").remove();                  }                });              }            });            var x=5;            var y=15;            $("table tr td img").mousemove(function(e){               $("#imgTip").prop("src", this.src).css({"top": (e.pageY + y) + "px", "left":(e.pageX + x) + "px"}).show(300);            });            $("table tr td img").mouseout(function(){              $("#imgTip").hide();            });        });  </script>  </head>    <body>   <table>    <tr>      <th>选项</th>      <th>编号</th>      <th>封面</th>      <th>购书人</th>      <th>性别</th>      <th>购书价</th>    </tr>    <tr id="0">      <td><input id="Checkbox1" type="checkbox" value="0"/></td>      <td>1001</td>      <td><img src="Images/img01.png" alt=""/></td>      <td>刘明明</td>      <td>女</td>      <td>37.80</td>    </tr>    <tr id="1">      <td><input id="Checkbox2" type="checkbox" value="1"/></td>      <td>1002</td>      <td><img src="Images/img02.png" alt=""/></td>      <td>刘明明</td>      <td>女</td>      <td>37.80</td>    </tr>    <tr id="2">      <td><input id="Checkbo3" type="checkbox" value="2"/></td>      <td>1002</td>      <td><img src="Images/img03.png" alt=""/></td>      <td>刘明明</td>      <td>女</td>      <td>37.80</td>    </tr>  </table>  <table>    <tr>      <td style="text-align:left;height:28px">        <span><input id="chkAll" type="checkbox" />全选</span>        <span><input id="btnDel" type="button" value="删除" class="btn"/></span>      </td>    </tr>  </table>  <img id ="imgTip" class="clsImg" src="Images/img01.png"/></body>    </html>
0 0