jQuery和js使用点滴

Posted 2020-09-29 zhangjinru123

1、checkbox全选按钮

1      <input type="checkbox" name="allcheck" id="allcheck" / >全选
2      <input type="checkbox" name="subBox" value="1" / >1
3      <input type="checkbox" name="subBox" value="2" / >2
4      <input type="checkbox" name="subBox" value="3" / >3
5      <input type="checkbox" name="subBox" value="4" / >4
6      <input type="checkbox" name="subBox" value="5" / >5

View Code

1     //全选和全不选功能按钮
2     $("#allcheck").click(function() {
3         var checked = $("#allcheck").is(‘:checked‘);
4         $(‘input[name="subBox"]‘).prop(‘checked‘, checked);                
5     });

View Code

2、判断checkbox是否选中

<input type="checkbox" name="allcheck" id="allcheck" />

 var checked = $("#allcheck").is(‘:checked‘);

 

3、遍历表格的数据，然后通过json传递到后端

<table class="table ">
   <thead>
    <tr data-type="1">
        <th>id</th>
        <th>名称</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
   </thead>
   <tbody id="rows">    
    <tr data-type="2">
        <th>1</th>
        <th>张</th>
        <th>22</th>
        <th>男</th>
    </tr>
    <tr data-type="3">
        <th>2</th>
        <th>张</th>
        <th>18</th>
        <th>女</th>
    </tr>
    <tr data-type="4">
        <th>3</th>
        <th>张</th>
        <th>24</th>
        <th>男</th>
    </tr>
    <tr data-type="5">
        <th>4</th>
        <th>张</th>
        <th>22</th>
        <th>女</th>
    </tr>
   </tbody>
</table>
<button onclick="gettableInfo()"> 获得表格数据</button>
function gettableInfo() {
    var objs = new Array();
    $(‘#rows tr‘).each(function(index){
        var obj = {};
        var tdArr = $(this).children();    
        
        obj["sequence"] = index;
        //获取data-type中的值    
        obj["type"] = $(this).data(‘type‘);
        obj["id"] = tdArr.eq(0).html();
        obj["name"] = tdArr.eq(1).html();
        obj["eag"] =tdArr.eq(2).html();
        obj["sex"] =tdArr.eq(3).html();
        
        objs.push(obj); 
    });
    
    alert(JSON.stringify(objs));
    return objs;
}

4、实现点击按钮表格行的上下移动

 1     <style type="text/css">
 2         .a{
 3             background: #666;
 4         }
 5     </style>
 6 
 7 <table class="table ">
 8    <thead>
 9     <tr data-type="1">
10         <th>id</th>
11         <th>名称</th>
12         <th>年龄</th>
13         <th>性别</th>
14     </tr>
15    </thead>
16    <tbody id="rows">    
17     <tr data-type="2" onclick="clicktr(this)" >
18         <th>1</th>
19         <th>张</th>
20         <th>22</th>
21         <th>男</th>
22     </tr>
23     <tr data-type="3" onclick="clicktr(this)" >
24         <th>2</th>
25         <th>张</th>
26         <th>18</th>
27         <th>女</th>
28     </tr>
29     <tr data-type="4" onclick="clicktr(this)" >
30         <th>3</th>
31         <th>张</th>
32         <th>24</th>
33         <th>男</th>
34     </tr>
35     <tr data-type="5" onclick="clicktr(this)" >
36         <th>4</th>
37         <th>张</th>
38         <th>22</th>
39         <th>女</th>
40     </tr>
41    </tbody>
42 </table>
43 
44 <button id="prev" > 上移</button>
45 <button id="next" > 下移</button>
46 
47 var TROBJ=null;
48     //上下移动
49     $("#prev").click(function() {
50         if(TROBJ==null){
51             alert("请选择一行");
52         }
53         $(TROBJ).insertBefore($(TROBJ).prev());
54     });
55     $("#next").click(function() {
56         if(TROBJ==null){
57             alert("请选择一行");
58         }
59         $(TROBJ).insertAfter($(TROBJ).next());
60     });
61 
62 function clicktr(obj) {
63     TROBJ=obj;
64 
65     $(‘#rows tr‘).each(function(index){
66 
67         if ($(TROBJ).data(‘type‘)!=$(this).data(‘type‘)) {
68             //如果不等于当前对象，将class移除
69            $(this).removeClass("a");
70         }
71         
72     })
73     // $(obj).addClass("a"); 
74     $(obj).toggleClass("a");
75 }

View Code