【jQuery】jQuery操作DOM —— 示例

最新推荐文章于 2024-07-30 23:43:41 发布

王晓斌

最新推荐文章于 2024-07-30 23:43:41 发布

阅读量553

点赞数

CC 4.0 BY-SA版权

分类专栏： JS.jQuery/jqGrid 文章标签： jQuery

本文链接：https://blog.youkuaiyun.com/robinjwong/article/details/40823899

JS.jQuery/jqGrid 专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一个利用HTML、CSS及jQuery实现的数据删除功能与图片预览效果的具体实现方式。通过简单的表格展示了如何选择性地移除数据行，并在鼠标悬停于图片时显示放大的预览图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

示例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>