好久没更新博客了，现在终于有时间整理，今天总结的是一个通过js来实现表格的状态编辑，主要就是使用jquery实现在html内对各种标签内容各种操作。好直接上代码，代码内做了注释。
html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 /*定义2个css类，edit-mode是单纯的美化按钮的一些设置，editing是标识类，用于后面jq操作时标识编辑按钮的状态*/ 8 .edit-mode{ 9 background-color: #b3b3b3; 10 padding: 8px; 11 text-decoration: none; 12 color: white; 13 } 14 .editing{ 15 background-color: #f0ad4e; 16 } 17 </style> 18 </head> 19 <body> 20 <!-- //按钮块，每个按钮都绑定了各自的jq函数 --> 21 <div style="padding: 20px"> 22 <input type="button" onclick="CheckAll('#edit_mode', '#tb1');" value="全选" /> 23 24 25 26 <input type="button" onclick="CheckReverse('#edit_mode', '#tb1');" value="反选" /> 27 <input type="button" onclick="CheckCancel('#edit_mode', '#tb1');" value="取消" /> 28 29 <a id="edit_mode" class="edit-mode" href="javascript:void(0);" 30 onclick="EditMode(this, '#tb1');">进入编辑模式</a> 31 32 </div> 33 34 <!-- //表格部分，设置表格边框 --> 35 <table border="1"> 36 <thead> 37 <tr> 38 <th>选择</th> 39 <th>主机名</th> 40 <th>端口</th> 41 <th>业务</th> 42 <th class="tb1">状态</th> 43 </tr> 44 </thead> 45 <tbody id="tb1"> 46 <tr> 47 <td><input type="checkbox" /></td> 48 <td edit="true">111 </td> 49 <td>v11</td> 50 <!-- //设置了自定义属性 --> 51 <td edit="true" edit-type="select" global-key="BUSINESS" select-val="2" >二手车</td> 52 <td edit="true" edit-type="select" global-key="STATUS" select-val="1" >在线</td> 53 </tr> 54 <tr> 55 <td><input type="checkbox" /></td> 56 <td edit="true">v1</td> 57 <td>v11</td> 58 <td edit="true" edit-type="select" global-key="BUSINESS" select-val="3">大保健</td> 59 <td edit="true" edit-type="select" global-key="STATUS" select-val="1">在线</td> 60 </tr> 61 <tr> 62 <td><input type="checkbox" /></td> 63 <td edit="true">v1</td> 64 <td>v11</td> 65 <td edit="true" edit-type="select" global-key="BUSINESS" select-val="3" >大保健</td> 66 <td edit="true" edit-type="select" global-key="STATUS" select-val="2">下线</td> 67 </tr> 68 </tbody> 69 </table> 70 <script src="js/jquery-1.8.2.min.js"></script> 71 <script src="js/edit_row.js"></script> 72 </body> 73 </html>
js
//自定义全局变量，模拟从数据库中读取的数据 STATUS = [ {'id': 1, 'text': "在线"}, {'id': 2, 'text': "下线"} ]; BUSINESS = [ {'id': 1, 'text': "车上会"}, {'id': 2, 'text': "二手车"}, {'id': 3, 'text': "大保健"} ]; //console.log(STATUS); //console.log(window['STATUS']); $(function(){ //自执行函数，jquery语法 // checkbox默认事件优先，然后执行自定义的事件 $('#tb1').find(':checkbox').click(function(){ var tr = $(this).parent().parent(); if($("#edit_mode").hasClass('editing')){ if($(this).prop('checked')){ // 当前行进入编辑状态 RowIntoEditMode(tr); }else{ // 当前行退出编辑状态 RowOutEditMode(tr); } } }); }); function CheckAll(mode, tb){ // 1、选中checkbox // 2、如果已经进入编辑模式，让选中行进入编辑状态 // tb = #tb1 参数直接代替 //$(tb) = $('#tb1') $(tb).children().each(function(){ // $(this) 表示循环过程中,每一个tr，每一行数据 var tr = $(this); //获取checkbox的状态，true or false var isChecked = $(this).find(':checkbox').prop('checked'); //判断checkbox状态，如果已经选中，忽略 if(isChecked==true){ }else{ //否则将checkbox状态设置为true $(this).find(':checkbox').prop('checked',true); // 如果已经进入编辑模式，让选中行进入编辑状态 //获取编辑按钮的是否有editing类，如果有说明已经进入编辑模式 var isEditMode = $(mode).hasClass('editing'); if(isEditMode){ // 当前行进入编辑状态 RowIntoEditMode(tr); } } }); } function CheckReverse(mode, tb){ // 是否进入了编辑模式 if($(mode).hasClass('editing')){ $(tb).children().each(function(){ // 遍历所有tr var tr = $(this); //筛选所有checkbox var check_box = tr.children().first().find(':checkbox'); if(check_box.prop('checked')){ //如果此行的checkbox状态为true，并退出编辑状态 check_box.prop('checked',false); RowOutEditMode(tr); }else{ //否则将checkbox状态设置为true，并进入编辑状态 check_box.prop('checked',true); RowIntoEditMode(tr); } }); }else{ //如果未进入编辑状态，则只设置checkbox状态为反 $(tb).children().each(function(){ //遍历每一行 var tr = $(this); //获取每行的checkbox var check_box = tr.children().first().find(':checkbox'); if(check_box.prop('checked')){ //判断checkbox状态，并取反 check_box.prop('checked',false); }else{ check_box.prop('checked',true); } }); } } function CheckCancel(mode, tb){ // 1、取消选中checkbox // 2、如果已经进入编辑模式，行退出编辑状态 $(tb).children().each(function(){ //遍历每行tr var tr = $(this); if(tr.find(':checkbox').prop('checked')){ // 移除选中 tr.find(':checkbox').prop('checked', false); //判断编辑按钮当前是否处于编辑状态 var isEditing = $(mode).hasClass('editing'); if(isEditing == true){ // 当前行，退出编辑状态 RowOutEditMode(tr); } } }); } function EditMode(ths, tb){ // ths =this,代表这个按钮标签 var isEditing = $(ths).hasClass('editing'); if(isEditing){ // 退出编辑模式，将编辑按钮的文本变更 $(ths).text('进入编辑模式'); //移除editing类标识 $(ths).removeClass('editing'); //同时检查所有行状态，如果checkbox处于选中状态，则退出编辑 $(tb).children().each(function(){ var tr = $(this); if(tr.find(':checkbox').prop('checked')){ // 当前行，退出编辑状态 RowOutEditMode(tr); } }); }else{ // 进入编辑模式，将按钮文本变更 $(ths).text('退出编辑模式'); //添加编辑状态标识的editing类 $(ths).addClass('editing'); $(tb).children().each(function(){ // $(this) 表示循环过程中,每一个tr，每一行数据 var tr = $(this); //判断checkbox状态，如果已经选中，则进入编辑状态 var isChecked = $(this).find(':checkbox').prop('checked'); if(isChecked==true){ // 当前行进入编辑状态 RowIntoEditMode(tr); } }); } } //进入编辑状态的函数 function RowIntoEditMode(tr){ //tr参数，为循环的每行 tr.children().each(function(){ //tr的子元素遍历，其实就是td var td = $(this); //判断没个td的自定义属性edit是否为true,true为可以编辑的td if(td.attr('edit') == 'true'){ //判断td的自定义属性edit-type是否为select按钮 if(td.attr('edit-type') == "select"){ //通过global-key属性获取字典名，然后使用window获取字典值 var all_values = window[td.attr('global-key')]; //获取当前select-val的值，为后续操作保留值 var select_val = td.attr('select-val'); //通过parseInt函数将字符串转换成整数 select_val = parseInt(select_val); var options = ""; //遍历字典里的值，作为select id和值 $.each(all_values, function(index, value){ if(select_val == value.id){ //这里的options是+=即为多个option选项 //判断进入编辑状态之前的select值，如果等于字典里的id和text值，则给option赋值，并拼接为select的option标签，设置selected状态 options += "<option selected='selected'>" + value.text + "</option>"; }else{ //和select_val不同的话，直接赋值给option，不设置selected属性 options += "<option>" + value.text + "</option>"; } }); //声明temp变量为 select标签，并绑定一个onchange事件函数 var temp = "<select onchange='MultiChange(this);'>" + options + "</select>"; //将temp转换为html console.log(temp) td.html(temp); }else{ //不是select类型，则获取td文本，转换为input标签 var text = td.text(); var temp = "<input type='text' value='" + text+ "' />"; td.html(temp); } } }) } globalCtrlKeyPress = false; // 如果按下键盘的任意键，执行 function，检测按键状态 window.onkeydown = function(event){ console.log(event.keyCode); if(event && event.keyCode == 17){ //监测按键号是否为ctrl建，是则变更全局变量globalCtrlKeyPress标识为true window.globalCtrlKeyPress = true; }else{ window.globalCtrlKeyPress = false; } }; function MultiChange(ths){ // 检测是否按下ctr键 if(window.globalCtrlKeyPress == true){ // td所在的tr中的索引位置 var index = $(ths).parent().index(); //获取当前select的值 var value = $(ths).val(); //获取当前标签的，爷爷标签即tr，并找所有checkbox状态为true并遍历 $(ths).parent().parent().nextAll().find("td input[type='checkbox']:checked").each(function(){ //设置这些tr的索引位置的子元素的值和当前事件一样 $(this).parent().parent().children().eq(index).children().val(value); }); } } //退出编辑状态函数 function RowOutEditMode(tr){ // tr.children().each(function(){ var td = $(this); if(td.attr('edit') == 'true'){ //这里要用：first，获取已经选择的option选项 var inp = td.children(':first'); console.log(inp) var input_value = inp.val(); td.text(input_value); } }); }
虽然看着是一个简单的编辑表格的功能，但却需要用jq 200多行代码实现。