效果展示：

程式碼實現：

1. <?php  
2. header("content-type:text/html;charset=utf-8");  
3. use yii\helpers\Html;  
4. use yii\widgets\LinkPager;  
5. //print_r($countries);die;  
6. ?>  
7. <h1>顯示出資料</h1>  
8. <input type="checkbox" value="全選" onclick="check(this);">全選  
9. <input type="checkbox" value="全不選" onclick="check_bx(this);"
   >全不選  
10. <input type="checkbox" value="反選" onclick="check_fx();">反選  
11. <input type="checkbox" value="批量刪除" onclick="check_del();">批量刪除  
12. <script src="public/jq.js"></script>  
13. <style media="screen">  
14.   tr{  
15.     background-color: red;  
16.     font-family: 宋體;  
17.     width: 100px;  
18.     height: 30px
    ;  
19.     line-height: 30px;  
20.     text-align: center;  
21.   }  
22.   td{  
23.     background-color: pink;  
24.     border: 2px solid purple;  
25.   }  
26.   .aa{  
27.     border: 2px solid green;  
28.     background-color: yellow;  
29.     font-family: 隸書;  
30.   }  
31.   h1{  
32.     font-family: 華文行楷;  
33.     box-shadow: 10px10px5px#888888;  
34.     border:2px
     solid;    
35.     border-radius:25px;   
36.     width: 200px;   
37.     background-color: white;  
38.   }  
39.   th{  
40.     font-family: 隸書;  
41.     border: 2px solid green;  
42.     background-color: yellow;  
43.   }  
44.   .checkbox{  
45.     width: 25px;  
46.     height: 30px;  
47.   }  
48. </style>  
49. <table border="1">  
50.     <th></th>  
51.     <th>序列號</th>  
52.     <th>父級ID</th>  
53.     <th>地區名稱</th>  
54.     <th>操作</th>  
55.     <?php foreach ($countries as $k => $v) {  ?>  
56.         <tr>  
57.           <td><input type="checkbox" id="<?php echo $v['r_id'] ?>"class="checkbox" name="check[]" value="<?php echo $v['r_id'] ?>"></td>  
58.           <td><?php echo $v['r_id'] ?></td>  
59.           <td><?php echo $v['pid'] ?></td>  
60.           <td><span class="num" id="<?php echo $v['r_id'] ?>"><?php echo $v['r_name']?></span></td>  
61.           <td><a href="javascript:void(0)" id="<?php echo $v['r_id'] ?>"class="aa" onclick="del(this)">刪除 </a></td>  
62.         </tr>  
63.    <?php } ?>  
64. </table>  
65. <?= LinkPager::widget(['pagination' => $pagination]) ?>  
66. <script type="text/javascript">  
67.   //即點即改入庫  
68.   $(function(){  
69.     $(document).on('click','.num',function(){  
70.         var id=$(this).attr('id');  
71.         var _this=$(this);  
72.         var new_val=$(this).html();  
73.         _this.parent().html("<input type='text'class='asdf' value="+new_val+" id="+id+">");  
74.         var inp=$('.asdf');  
75.         inp.focus();  
76.         inp.blur(function(){  
77.             var old_id=$(this).attr('id');  
78.             var old_val=$(this).val();  
79.             //inp.parent().html("<span class=\"num\" id="+old_id+">"+old_val+"</span>");  
80.             $.get("index.php?r=upload/updates",{measure_unit:old_val,id:old_id},function(e){  
81.                 if(e==1){  
82.                     inp.parent().html("<span class=\"num\" id="+old_id+">"+old_val+"</span>");  
83.                 }else{  
84.                     inp.parent().html("<span class=\"num\" id="+old_id+">"+new_val+"</span>");  
85.                 }  
86.             })  
87.         })  
88.     })  
89.   })  
90. </script>  
91. <script>  
92.     //無重新整理刪除  
93.       function del(obj)  
94.     {  
95.         var ids=obj.id;  
96.         ajax=new XMLHttpRequest();  
97.         ajax.onreadystatechange=function()  
98.         {  
99.             if(ajax.readyState==4)  
100.             {  
101.                 //alert(ajax.responseText);  
102.                 if(ajax.responseText==1)  
103.                 {  
104.                     obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);  
105.                 }  
106.                 else{  
107.                     alert("刪除失敗");  
108.                 }  
109.             }  
110.         }  
111.         ajax.open("get","index.php?r=upload/del&ids="+ids);  
112.         ajax.send(null);  
113.     }  
114.     /*全選*/  
115.         function check(obj)  
116.     {  
117.         var ids=document.getElementsByName("check[]");  
118.         if(obj.checked)  
119.         {  
120.             for(var i=0;i<ids.length;i++)  
121.             {  
122.                 ids[i].checked=true;  
123.             }  
124.         }  
125.     }  
126.     /*全不選*/  
127.      function check_bx(obj)  
128.     {  
129.         var ids=document.getElementsByName("check[]");  
130.         if(obj.checked)  
131.         {  
132.             for(var i=0;i<ids.length;i++)  
133.             {  
134.                 ids[i].checked=false;  
135.             }  
136.         }  
137.     }  
138.       //反選  
139.     function check_fx()  
140.     {  
141.         var ids=document.getElementsByName("check[]");  
142.         for(var i=0;i<ids.length;i++)  
143.         {  
144.             ids[i].checked=!ids[i].checked;  
145.         }  
146.     }  
147.     /*批量刪除*/  
148.      function check_del()  
149.     {  
150.         var ids=document.getElementsByName("check[]");  
151.         var str='';  
152.         for(var i=0;i<ids.length;i++)  
153.         {  
154.             if(ids[i].checked)  
155.             {  
156.                 str=str+','+ids[i].value;  
157.             }  
158.         }  
159.         new_str=str.substr(1);  
160.         ajax=new XMLHttpRequest();  
161.         ajax.onreadystatechange=function() {  
162.             if (ajax.readyState == 4) {  
163.                 //alert(ajax.responseText);    
164.                 if(ajax.responseText==1)  
165.                 {  
166.                     for(var j=ids.length-1;j>=0;j--)  
167.                     {  
168.                         if(ids[j].checked)  
169.                         {  
170.                           ids[j].parentNode.parentNode.parentNode.removeChild(ids[j].parentNode.parentNode);  
171.                         }  
172.                     }  
173.                 }  
174.                 else
175.                 {  
176.                     alert("刪除失敗");  
177.                 }  
178.             }  
179.         }  
180.         ajax.open("get","index.php?r=upload/del_all&new_str="+new_str);  
181.         ajax.send(null);  
182.     }  
183. </script>  

1. <?php  
2. namespace app\controllers;  
3. use Yii;  
4. use yii\filters\AccessControl;  
5. use yii\web\Controller;  
6. use yii\filters\VerbFilter;  
7. use app\models\LoginForm;  
8. use app\models\ContactForm;  
9. use yii\web\UploadedFile;  
10. use app\models\Upload;  
11. use yii\data\Pagination;  
12. use app\models\Country;  
13. use app\models\Region;  
14. class UploadController extends Controller  
15. {  
16.     //public $layout=false; //禁用yii自帶樣式  
17.     public function actionIndex(){  
18.         $model = new Upload();  
19.         if ($model->load(Yii::$app->request->post()) && $model->validate()) {  
20.             // 驗證 $model 收到的資料  
21.             // 做些有意義的事 ...  
22.             return $this->render('entry-confirm', ['model' => $model]);  
23.         } else {  
24.             // 無論是初始化顯示還是資料驗證錯誤  
25.             return $this->render('entry', ['model' => $model]);  
26.         }  
27.     }  
28.     public function actionAdds()  
29.     {  
30.         $model = new Upload();  
31.         $request = Yii::$app->request;  
32.         $post=$request->post('Upload');  
33.         $u_name = $post['u_name'];  
34.         $u_pwd = $post['u_pwd'];  
35.         //在瀏覽器輸出的值是 yii\web\UploadedFile Object ( [name] => 2.jpg [tempName] => C:\Windows\php3986.tmp  
36.         // [type] => image/jpeg [size] => 216848 [error] => 0 )  
37.          $arr =  $model->u_img = UploadedFile::getInstance($model,'u_img');  
38.          //print_r($arr);  
39.           if ($model->upload()){  
40.                 $u_img = $arr->name;  
41.                 //var_dump($u_img);  
42.                  $connection = \Yii::$app->db;  
43.                     $result=$connection->createCommand()->insert('upload', [  
44.                 'u_name' => $u_name,  
45.                 'u_pwd' => $u_pwd,  
46.                  'u_img' =>$u_img,  
47.             ])->execute();  
48.             if($result)  
49.             {  
50.               echo "新增成功";  
51.             }  
52.             else
53.             {  
54.                 echo "新增失敗";  
55.             }  
56.             }  
57.     }  
58.     /*分頁*/  
59.     public function actionLists()  
60.      {  
61.          $query = Country::find();  
62.          $pagination = new Pagination([  
63.              'defaultPageSize' => 1,  
64.              'totalCount' => $query->count(),  
65.          ]);  
66.          $countries = $query->orderBy('name')  
67.              ->offset($pagination->offset)  
68.              ->limit($pagination->limit)  
69.              ->all();  
70.          return $this->render('lists', [  
71.              'countries' => $countries,  
72.              'pagination' => $pagination,  
73.          ]);  
74.      }  
75.          /*地區表進行分頁*/  
76.          public function actionShow(){  
77.              $query = Region::find();  
78.              $pagination = new Pagination([  
79.                      'defaultPageSize' => 6,  
80.                      'totalCount' => $query->count(),  
81.              ]);  
82.              $countries = $query->orderBy('r_id')  
83.                      ->offset($pagination->offset)  
84.                      ->limit($pagination->limit)  
85.                      ->all();  
86.              return $this->render('show', [  
87.                      'countries' => $countries,  
88.                      'pagination' => $pagination,  
89.              ]);  
90.          }  
91.          /*修改*/  
92.          public function actionUpdates(){  
93.              $name = $_GET['measure_unit'];  
94.             $id = $_GET['id'];  
95.              $connection = \Yii::$app->db;  
96.              $command = $connection->createCommand("UPDATE region SET r_name='$name' WHERE r_id='$id'");  
97.              $command->execute();  
98.              if(!empty($command)){  
99.                  echo 1;  
100.              }else{  
101.                  echo 0;  
102.              }  
103.          }  
104.          // 無重新整理delete  
105.          public function actionDel(){  
106.             $id=$_GET['ids'];  
107.             $connection=\Yii::$app->db;  
108.             $arr=$connection->createCommand("delete from region where r_id='$id'")->execute();  
109.             if($arr){  
110.                 echo 1;  
111.             }else{  
112.                 echo 0;  
113.             }  
114.          }  
115.          /*  
116.         批量刪除  
117.         @new_str  GET  
118.         */  
119.          public function actionDel_all(){  
120.             $new_str=$_GET['new_str'];  
121.             $connection=\Yii::$app->db;  
122.             $arr=$connection->createCommand("delete from region where r_id in($new_str)")->execute();  
123.             if($arr){  
124.                 echo 1;  
125.             }else{  
126.                 echo 0;  
127.             }  
128.          }  
129. }  
130. ?>  

另外一種方法：

1. <h1>您得到的驗證碼為：<font id="sum" color="red"></font></h1>  
2. <h2><font color="aqua">驗證碼的個數是：</font><input type="text" id="num"></h2>  
3. <h3><input type="button" onclick="fun();" value="點選生成"><input type="reset" value="重新整理"></h3>  
4. <html>  
5. <title>點名表</title>  
6. <fieldset style="color: blue">  
7.     <legend><h2>1408phpE班級點名表</h2></legend>  
8.     <h1>點名表</h1>  
9.     <h3><textarea id="student"></textarea></h3>  
10.     <input type="button" onclick="fun1();" value="點選" id="one">  
11. </fieldset>  
12. </html>  
13. <form>  
14.     <p>  
15.         <input type="checkbox" id="ab" onclick="fun5();"> 全選/全不選<br>  
16.         <input type="checkbox" value="反選" onclick="fun6();" id="fa">反選<br>  
17.         <input type="checkbox" name="a" value="吃飯">吃飯<br>  
18.         <input type="checkbox" name="a" value="睡覺">睡覺<br>  
19.         <input type="checkbox" name="a" value="打豆豆">打豆豆<br>  
20.         <input type="checkbox" name="a" value="玩遊戲">玩遊戲<br>  
21.         <input type="checkbox" name="a" value="看電影">看電影<br>  
22.     </p>  
23. </form>  
24.     <script>  
25.         //點名表  
26.         document.bgColor='green';  
27.         function fun2(){  
28.             var arr=Array('134','1234','14324','12342134','1234123424','34534','6434','342','234','234','342','2341','24','a','s','d','f','g','h','j','n','v','x','xw');  
29.             var num=parseInt(Math.random()*arr.length);  
30.             document.getElementById('student').innerHTML=arr[num];  
31.         }  
32.         function fun1(){  
33.             if(document.getElementById('one').value=='開始'){  
34.                 document.getElementById('one').value='停止';  
35.                 a=setInterval("fun2();",10)  
36.             }else{  
37.                 document.getElementById('one').value='開始';  
38.                 clearInterval(a);  
39.             }  
40.         }  
41.         //驗證碼  
42.         function fun(){  
43.             var num=document.getElementById('num').value;  
44.             var s='';  
45.             for(var a=1;a<=num;a++){  
46.                 s=s+parseInt(Math.random()*10);  
47.             }  
48.             document.getElementById('sum').innerHTML=s;  
49.         }  
50.         //全選  
51.         function fun5(){  
52.             var q=document.getElementById('ab');  
53.             var w=document.getElementsByName('a');  
54.             if(q.checked==true){  
55.                 for(var a=0;a< w.length;a++){  
56.                     w[a].checked=false;  
57.                 }  
58.             }else{  
59.                 for(var a=0;a< w.length;a++){  
60.                     w[a].checked=true;  
61.                 }  
62.             }  
63.         }  
64.         //反選  
65.         function fun6(){  
66.             var e=document.getElementsByName('a');  
67.             for(var b=0;b< e.length;b++){  
68.                 if(e[b].checked){  
69.                     e[b].checked=false;  
70.                 }else{  
71.                     e[b].checked=true;  
72.                 }  
73.             }  
74.         }  
75.     </script>