http://www.mamicode.com/info-detail-1466046.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .edit-mode{ padding:10px; } .editing{ padding:10px; background-color: #ffd00f; } </style> </head> <body> <div style="padding: 20px"> <input type="button" value="全选" onclick="CheckAll('#edit_mode','#tb1');"/> <input type="button" value="反选" onclick="CheckReverse('#edit_mode','#tb1');"/> <input type="button" value="取消" onclick="CheckCancel('#edit_mode','#tb1');"/> <a id="edit_mode" class="edit-mode" href="javascript:void(0)" onclick="EditMode(this,'#tb1')" >进入编辑模式</a> </div> <table border="1"> <thead> <tr> <th>选择</th> <th edit="true">主机</th> <th>端口</th> <th>状态</th> </tr> </thead> <tbody id="tb1"> <tr> <td><input type="checkbox"></td> <td edit="true" edit-type="input">v1</td> <td>p1</td> <td edit="true" edit-type="select" set-val="1" global-key="STATUS_DICT">在线</td> </tr> <tr> <td><input type="checkbox"></td> <td edit="true" edit-type="input">v2</td> <td>p2</td> <td edit="true" edit-type="select" set-val="1" global-key="STATUS_DICT">在线</td> </tr> <tr> <td><input type="checkbox"></td> <td edit="true" edit-type="input">v3</td> <td>p3</td> <td edit="true" edit-type="select" set-val="1" global-key="STATUS_DICT">在线</td> </tr> </tbody> </table> <script src="jquery-3.1.0.min.js"></script> <script > STATUS_DICT = [ {'id': 1, 'value': "在线"}, {'id': 2, 'value': "下线"} ]; $(function(){ BindSingleCheck('#edit_mode','#tb1'); }); function BindSingleCheck(mode,tb){ $(tb).find(':checkbox').bind('click',function(){ var tr = $(this).parent().parent(); if($(mode).hasClass('editing')){ if($(this).prop('checked')){ RowIntoEdit(tr) }else{ RowOutEdit(tr) } } }); } /* 监听是否已经按下control键 */ window.globalCtrlKeyPress = false; window.onkeydown = function (event) { console.log(event.keyCode); if(event && event.keyCode == 17){ window.globalCtrlKeyPress = true; console.log('ctrl + ok') } }; window.onkeyup = function (event) { if(event && event.keyCode == 17 ){ window.globalCtrlKeyPress = false; console.log('ctrl -----ok') } }; // 写一个创建select标签的函数 function CreateSelect(attrs,csses,option_dict,item_key,item_value,current_val){ var doc = document; var sel = doc.createElement('select'); $.each(attrs,function(k,v){ $(sel).attr(k,v); }); $.each(csses,function(k,v){ $(sel).attr(k,v) }); $.each(option_dict,function(k,v){ var opt1 = doc.createElement('option'); var sel_text = v[item_value]; var sel_value = v[item_key]; if(sel_value == current_val) { $(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).attr('selected',true).appendTo($(sel)); }else{ $(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).appendTo($(sel)); } }); return sel; } // 写一个当select变化时,批量修改下面的值和当前值一致 function MultiSelect(ths){ console.log('33333'); if(window.globalCtrlKeyPress){ console.log('171717171'); var index = $(ths).parent().index(); var value = $(ths).val(); $(ths).parent().parent().nextAll().find(':checkbox').each(function(){ $(this).parent().parent().children().eq(index).children().val(value) }) } } //写一个将行变成编辑模式的函数 function RowIntoEdit(tr){ // console.log('1111') tr.children().each(function(){ //$(this), 当前循环元素,当前td if($(this).attr('edit') == 'true'){ if($(this).attr('edit-type') == 'select' ){ //在线,对应的value值 var select_val = $(this).attr('set-val'); // global_key全局变量的变量名 var global_key = $(this).attr('global-key'); //创建一个select标签,并且让select标签默认选中当前的值 /* <select onchange="MultiSelect(this);"> <option value="1" selected="selected">在线</option> <option value="2">下线</option> </select> */ var select_tag = CreateSelect({"onchange":"MultiSelect(this)"},{},window[global_key],'id','value',select_val); /*这里有一个特殊的window[global_key],这个是干什么的呢? 举个例子,现在有一个全局变量 A = [11,22] 直接调用console.log(A)打印记过 [11,22] 使用console.log(window['A']) 打印结果也是[11,22],所以 window['A'] 就是变量A的用字符的表达方式, 这里global_key = 'global-key',所以 window['global-key'] 就相当于直接调用变量global-key */ //把创建后的select标签,换到当前td中 $(this).html(select_tag) }else{ var orgin_value = $(this).text(); var temp = "<input value='" +orgin_value +"'>"; $(this).html(temp); } } }) } //写一个行退出编辑模式的函数 function RowOutEdit(tr){ tr.children().each(function(){ if($(this).attr('edit') == 'true'){ if($(this).attr('edit-type') == 'select'){ var new_val = $(this).children(':first').val(); var new_text = $(this).children(':first').find("option[value = '" +new_val+"']").text(); $(this).attr('set-val',new_val); $(this).text(new_text); }else{ var orgin_value = $(this).children().first().val(); $(this).text(orgin_value); } } }); } //全选按钮调用的函数,函数检查是否在编辑模式下进行的全选,如果是则将所有的行选中并且循环每行调用RowIntoEdit(tr),如果不是则直接全选中 function CheckAll(mode,tb){ // mode = '#edit-mode' // tb = '#tb' //判断是否在编辑模式,如果是 if($(mode).hasClass('editing')){ //选中所有的checkbox,并将所有行进行处理成进入编辑模式. $(tb).children().each(function(){ //找到tr var tr = $(this); //找到tr下的checkbox var check_box=tr.children().first().find(':checkbox'); if(check_box.prop('checked')){ }else{ //选中 check_box.prop('checked',true); RowIntoEdit(tr); } }) //如果不在编辑模式下,直接全选 } else { $(tb).find(':checkbox').prop('checked',true); } } //反选按钮调用的函数,函数检查是否在编辑模式下进行的全选,如果是反选的同时调用RowIntoEdit和RowOutEdit,如果不是直接反选 function CheckReverse(mode,tb){ //判断是否进入编辑模式 if($(mode).hasClass('editing')){ $(tb).children().each(function(){ var tr = $(this); var check_box = tr.children().first().find(':checkbox'); if(check_box.prop('checked')){ check_box.prop('checked',false); RowOutEdit(tr) }else{ check_box.prop('checked',true); RowIntoEdit(tr) } }); //如果不在编辑模式,则直接反选 }else{ $(tb).find(':checkbox').each(function(){ var check_box = $(this); if(check_box.prop('checked')){ check_box.prop('checked',false); }else{ check_box.prop('checked',true); } }) } } //取消按钮调用的函数,首先判断是否在编辑模式下,如果是则取消并调用RowOutEdit函数,如果不是则直接取消 function CheckCancel(mode,tb){ if($(mode).hasClass('editing')){ $(tb).children().each(function(){ var tr = $(this); var check_box = tr.children().first().find(':checkbox'); if (check_box.prop('checked')){ check_box.prop('checked',false); //当前行退出编辑模式 RowOutEdit(tr); } }); }else{ $(tb).find(':checkbox').prop('checked',false); } } //点击"进入编辑模式"时调用的函数. function EditMode(ths,tb){ var mode = $(ths); //如果点击前是编辑模式,点击后为非编辑模式,我们就要找到正在编辑的行tr,并使用RowOutEdit(tr) if(mode.hasClass('editing')){ mode.removeClass('editing'); $(tb).children().each(function(){ var tr = $(this); var check_box = tr.children().first().find(':checkbox'); if(check_box.prop('checked')){ RowOutEdit(tr) } }); //如果之前不是编辑模式,则进入,并循环循环行,检测是否checked,选中的进入编辑模式 } else{ mode.addClass('editing'); $(tb).children().each(function(){ var tr = $(this); var check_box = tr.children().first().find(':checkbox'); if(check_box.prop('checked')){ RowIntoEdit(tr); } }) } } </script> </body> </html>