append(在后面添加)和prepend(在最前面添加)

最新推荐文章于 2023-01-15 16:57:38 发布

Kathy_LLi

最新推荐文章于 2023-01-15 16:57:38 发布

阅读量7.6k

点赞数

本文链接：https://blog.csdn.net/Kathy_Hui/article/details/82461293

版权

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>append(在后面添加)和prepend(在最前面添加)的区别</title>
</head>
<script src='js/jquery-1.11.3.min.js'></script>
<style>
table {width: 100%;border: 1px solid #ccc;text-align: center;}
table td,table th {width: 25%;border: 1px solid #ccc;}
table td input[type='button'] {width: 40%;cursor: pointer;}
table td input[type='text'] {background-color: #fff;text-align: center;}
.aft,.bef {width: 20%;height: 25px;cursor: pointer;}
</style>
<script>
$(function () {
   //在末尾添加一行
   $('.aft').click(function () {
       var tr1 = $(".clonTab").find("tr").eq(0).clone();
       $('tbody').append(tr1);
   });
   //在最前面添加一行
   $('.bef').click(function () {
       var tr2 = $(".clonTab").find("tr").eq(0).clone();
       $('tbody').prepend(tr2);
   });
   //删除
   $('body').on('click','.dele',function () {
       $(this).parent().parent().remove('tr');
   })
   //修改
   var count = 1;
   $('body').on('click','.revi',function(){
       var text = $(this).parent();
       var textTd1 = text.siblings("td:eq(1)");
       var textTd2 = text.siblings("td:eq(2)");
       if(count == 1 && (text.siblings("td:eq(1)").children("input").length == 0)){
           count += 1;
           var a = textTd1.text();
           var b = textTd2.text();
           text.siblings("td").text("");
           textTd1.append("<input type='text' value='" + a + "'>");
           textTd2.append("<input type='text' value='" + b + "'>");
           $(this).val("保存");
       }else if((count == 2) || (count ==1 && (text.siblings("td:eq(1)").children("input").length == 1))){
           count = 1;
           var c = textTd1.children("input").val();
           var d = textTd2.children("input").val();
           text.siblings("td").children().remove();
           textTd1.text(c);
           textTd2.text(d);
           $(this).val("修改");
       }
   });
   //全选
       $('.selectAll').click(function(){
           var item1 = $('tbody').find('tr').find('td:eq(0)');
           item1.attr("checkbox","true");
       })
   });
   function checkAll(me) {
       var chk = $(me).prop("checked");
       var chkName = $(me).val();
       if (chk == true) {
       $(me).prop("checked", "checked");
       $(me).parent().parent().parent().siblings('tbody').find('tr').find("input[name='chk_1']").prop("checked", "checked");
       }else{
       $(me).prop("checked", "");
       $(me).parent().parent().parent().siblings('tbody').find('tr').find("input[name='chk_1']").prop("checked", "");
       }
       }
</script>
</head>
<body>
<input type="button" class="aft" value="在后面添加">
<input type="button" class="bef" value="在前面添加">
<table>
<thead>
<tr>
   <th class="selectAll"><input type="checkbox" οnclick="checkAll(this)">全选</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
   <td><input type="checkbox" name="chk_1"></td>
<td>张三</td>
<td>男</td>
<td>
<input type="button" class="dele" value="删除">
<input type="button" class="revi" value="修改">
</td>
</tr>
<tr>
   <td><input type="checkbox" name="chk_1"></td>
<td>李四</td>
<td>女</td>
<td>
<input type="button" class="dele" value="删除">
<input type="button" class="revi" value="修改">
</td>
</tr>
</tbody>
</table>