jquery--数据删除和图片预览

最新推荐文章于 2021-01-03 14:28:38 发布

gt2008gt

最新推荐文章于 2021-01-03 14:28:38 发布

阅读量214

点赞数

CC 4.0 BY-SA版权

分类专栏： Jquery 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/gt2008gt/article/details/84244378

Jquery 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的表格操作案例，包括隔行变色、鼠标悬停预览图片、单选框选择与删除行等功能。通过具体代码展示了如何利用jQuery简化DOM操作，实现了良好的用户体验。

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

<script type="text/javascript">
$(function(){
//隔行变色
$("table tr:nth-child(odd)").css("background-color","#eee");
//小图片鼠标移动事件
var x=5;
var y=15;
$("table tr td img").mousemove(function(e){
$("#imgTip").attr("src",this.src).css({"top":(e.pageY+y)+"px","left":(e.pageX+x)+"px"}).show(3000);

});
//小图片鼠标移出事件
$("table tr td img").mouseout(function(){
$("#imgTip").hide();
});
   //删除按钮单选框事件
$("#btnDel").click(function(){
//获取除复选框以外的所有选中项
var intL=$("table tr td input:checked :not('#chkAll')").length;
//如果有值
if(intL!=0){
//遍历除全选复选框外额行
$("table tr td input[type=checkbox] :not('#chkAll')").each(function(index){

if(this.checked){
//获取选中的值，并删除该值所在的行
$("table tr[id="+this.value+"]").remove();

}

})
}

});

//全选复选框单击事件
$("#chkAll").click(function(){
if (this.checked){
$("table tr  td input[type=checkbox]").attr("checked",true);
}
else {
$("table tr  td input[type=checkbox]").attr("checked",false);
}
});







});

</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/1.jpg" alt=""/ ></td>
  <td>李小明</td>
  <td>男</td>
  <td>35.60</td>
 </tr>
  
  
    <tr id="1">
  <td><input id="Checkbox2" type="checkbox"   value="1"/></td>
  <td>1002</td>
  <td><img src="images/1.jpg" alt=""/ ></td>
  <td>李小利</td>
  <td>女</td>
  <td>36.60</td>
 </tr>
 
 
 
  <tr id="2">
  <td><input id="Checkbox3" type="checkbox"   value="2"/></td>
  <td>1003</td>
  <td><img src="images/1.jpg" alt=""/ ></td>
  <td>李利</td>
  <td>男</td>
  <td>38.60</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 alt="" src="images/1.jpg"  id="imgTip"  class="clsImg">
  </body>
</html>