没有跟上时代的初学者，没有学习新的三大框架，要下定决心学习学习。

不过在使用bootstrap框架在收集和获取数据的时候有着难以言表的重复大量数据，于是简单的封装了一个属于自己的js,自己感觉还是挺好用的，嘿嘿。

1 
      
         2     
       
          3         
        
           4             
         
            5                 
          名称*  6                 
          
             7                     
             8                 
          
  9             
         
 10             
         
           11                 
          来源* 12                 
          
            13                     
            14 网络 15 书籍 16  17                 
          
 18             
         
 19             
         
           20                 
          国籍* 21                 
          
            22                     
            23                 
          
 24             
         
 25             
         
           26                 
          专业 27                 
          
            28                     
            29                 
          
 30             
         
 31              32             33             
         
           34                 
          第一作者 35                 
          
            36                     
            37                 
          
 38             
         
 39             
         
           40                 
          影响因子 41                 
          
            42                     
            43                 
          
 44             
         
 45         
        
 46         
        
          47             
         
           48                 
          所属参展商 49                 
          
            50                     
            51                     
            52                 
          
 53             
         
 54             
         
           55                 
          刊名 56                 
          
            57                     
            58                 
          
 59             
         
 60                61             
         
           62                 
          手术 63                 
          
            64                     
            65                 
          
 66             
         
 67             
         
           68                 
          页码 69                 
          
            70                     
            71                 
          
 72             
         
 73             
         
           74                 
          单位 75                 
          
            76                     
            77 国企 78 私企 79  80                 
          
 81             
         
 82         
        
 83     
       
 84     
       
 85 
      
 86 
      
        87     
          88         
 89         
 90         
 91         
 92     
 93     
          94         
 97         
100         
103         
106     
107 
       
        
         
参数ID
         
参数值
         
备注
         
操作
        
        
         
 95              96         
         
 98              99         
         
101             102         
         
104             删除105         
        
       
      
108 
      
       109     
       添加110 
      
111 112 

1 var jsons = function() {};  2     jsons.prototype = {  3         get: function (content, content1) {  4             var field;  5             var headdatas = new Object();  6             var tabledatas = new Object();  7             if (content[0].tagName.toLowerCase() == "div") {  8                 headdatas = Gets(content);  9             } else { 10                 tabledatas = Gettable(content); 11             } 12             if (content1[0].tagName.toLowerCase() == "table") { 13                 tabledatas = Gettable(content1); 14             } else { 15                 headdatas = Gets(content1); 16             } 17             var root = $.extend(headdatas, tabledatas); 18             return root; 19         }, 20         set: function (content1, content2, json) { 21             var field; 22             if (content1[0].tagName.toLowerCase() == "div") { 23                 field = content1.find('input,textarea,select'); 24                 Fill(field, json); 25             } else { 26                 FillTableData(content1, json); 27             } 28             if (content2[0].tagName.toLowerCase() == "table") { 29                FillTableData(content2, json); 30             } else { 31                 Fill(content2, json); 32             } 33         }, 34         del:function(content) { 35             var id = delData(content); 36             return id; 37         } 38     } 39 //指定div 里面所有的input,textarea,raio,checkbox等。 40 function Gets(content) { 41     try { 42         var lRoot = new Object(); 43         var field = content.find('input,textarea,select'); 44         lRoot = CollectionInputData(field); 45         return lRoot; 46  47     } catch (e) { 48         alert("抱歉，攻城狮正在攻城！"); 49     } 50  51 } 52 //指定表格内的数据 53 function Gettable(content) { 54     try { 55         var lRoot = new Object(); 56         var tabledata = new Array(); 57         var tables = content.find("tr"); 58         for (var i = 0; i < tables.length; i++) { 59             var trDatas = new Object(); 60             var tdData = tables.eq(i).find('td').find('input,textarea,select'); 61             trDatas = CollectionInputData(tdData); 62             if ($.isEmptyObject(trDatas)) continue; 63             tabledata.push(trDatas); 64         } 65         lRoot["table"] = tabledata; 66         return lRoot; 67     } catch (e) { 68         alert("抱歉，攻城狮正在攻城！"); 69     } 70 } 71 //收集指定容器内输入框的数据 72 function CollectionInputData(content) { 73     var root = new Object(); 74     try { 75         for (var j = 0; j < content.length; j++) { 76             var myobject = new Object(); 77             switch (content[j].type) { 78             case "text": 79             case "hidden": 80             case "textarea": 81             case "number": 82                 if (content[j].value != "" && content[j].value != undefined) { 83                     if (root[content[j].name]) { 84                         myobject[content[j].name] = content[j].value; 85                     } else { 86                         root[content[j].name] = content[j].value; 87                     } 88                 } 89                 break; 90             case "radio": 91             case "checkbox": 92                 root[content[j].name] = content[j].checked ? 1 : 0; 93                 break; 94             case "select-one": 95                 if (content[j].value != "" && content[j].value != undefined) { 96                     root[content[j].name] = content[j].value; 97                 } else { 98                     root[content[j].name] = -1; 99                 }100                 break;101             default:102                 break;103             }104         }105         return root;106     } catch (error) {107         alert("抱歉，攻城狮正在攻城！");108     }109 }110 // 指定位置容器赋值111 function Fill(content, json) {112     for (var i = 0; i < content.length; i++) {113         if (json[content[i].name]) {114             switch (content[i].type) {115             case "text":116             case "hidden":117             case "textarea":118             case "number":119                 content[i].value = json[content[i].name];120                 break;121             case "radio":122             case "checkbox":123                 content[i].checked = json[content[i].name];124             case "select-one":125                 content[i].value = json[content[i].name];126                 break;127             default:128             }129             //移除json中已经使用过的值130             // delete json[content[i].name];131         }132     }133 }134 //填充表格数据135 function FillTableData(content, json) {136     var tables = content.find("tr");137     var tdData;138     switch (tables.length) {139     case 0:140         return;141     default:142         tdData = tables.eq(0).find('td').find('input,textarea');143         if (tdData.length > 0) {144             for (var i = 0; i < json.table.length - tables.length; i++) {145                 trAdd();146             }147             //重新获取有几个tr148             tables = content.find("tr");149             for (var i = 0; i < json.table.length; i++) {150                 //循环赋值151                 tdData = tables.eq(i).find('td').find('input,textarea');152                 Fill(tdData, json.table[i]);153             }154         } else {155             if (json.table != "" && json.table != undefined) {156                 for (var i = 0; i < json.table.length - (tables.length - 1) ; i++) {157                     trAdd();158                 }159                 //重新获取有几个tr160                 tables = content.find("tr");161                 for (var i = 0; i < json.table.length; i++) {162                     //循环赋值163                     tdData = tables.eq(i + 1).find('td').find('input,textarea');164                     Fill(tdData, json.table[i]);165                 }166             }167         }168         break;169     }170 }171 //删除选中的数据172 function delData(content) {173     var id = "";174     var arrselections = content.bootstrapTable('getSelections');175     if (arrselections.length <= 0) {176         alert("请选择有效数据!");177         return id;178     }179    180     for (var i = 0; i < arrselections.length; i++) {181         id += arrselections[i].Id + ',';182     }183     id = id.substring(0, id.length - 1);184     return id;185 }186 //增加表格行187 function trAdd() {188     var table = $("#tables");189     var str = "";190     if (table.find('tr').length > 1) {191         str += table.find('tr').eq(1)[0].innerHTML;192     } else {193         str += table.find('tr').eq(0)[0].innerHTML;194     }195     str += "";196     table.append(str);197 }198 //删除指定行199 function trDelete(content) {200     var td = $(content);201     td.parents("tr").remove();202 }

主题思想是通过name来对应收集赋值数据，以前是通过id，但是总感觉重复劳动比较多，就把它抽了出来。

一个json里面包含对象和数组的键值对。对象放在div 里面，数组是table 里面的数据。总体还是传递两个id,定位到要收集哪里的数据。

应该有许多的缺点，不过应付属于我自己的项目还是可以的，毕竟小项目(*^▽^*)。。。