• 原生js封装table表格操作,获取任意行列td,任意单行单列方法


    V1.001更新增加findTable-min.js 本次更新,优化了代码性能方面,增加了部分新功能,可以获取多个table表格批量操作。

    考虑到本人后面的项目中可能涉及到大量的表格操作,提前先封了 一个简单的操作方法,日后再加完善,但对于小页面需求是完全够 用的。该方法很强大。

    f(elm,boolean).getTableXY(x,y,type)

    elm传入表格选择器 如果不传,默认查找table标签, 使用的是querySelector()和querySelectorAll()选择器 请注意兼容性。

    boolean。选择取页面第一个还是取页面所有符合条件的table数组 默认为false,查找页面第一个符合条件的元素。可选。

    x:表示第几行tr

    y:表示第几列td

    type:[“all” || “tr” || “td”] all:获取精确地td对象,第x行,第y列 (4,7,‘all’) tr:获取第x行整行tr。(1,‘tr’) 此处y参数可省略。 td:获取第y列整列td。(3,‘td’) 此处x参数可省略 该方法返回原生DOM对象或原生DOM对象数组  

    下面给大家分享js源码。  

    0 /***
    1  
    2 表格操作插件 V1.001
    3 表格操作插件 V1.002
    4 1.修复传参传入null的错误
    5 2.修复给每个td绑定传入错误,应该循环数组
    6 3.给f()返回的数组绑定方法,可以直接调用
    7 4.修复部分BUG
    8 Mr.chen
    9  
    10 ***/
    11 var f = function(tab,flag){
    12  
    13 var findTable = {},
    14 f = findTable,
    15 tabArr = [];
    16  
    17 if(tab == true || tab == 'true'){
    18  
    19 tab = 'table';
    20  
    21 flag = true;
    22  
    23 }else{
    24  
    25 tab = tab;
    26  
    27 }
    28  
    29 //判断是获取单个还是获取所有,最后都要装进数组
    30 if(flag){
    31  
    32 f.table = document.querySelectorAll(tab);
    33  
    34 for(var o = 0; o < f.table.length; o += 1){
    35  
    36 tabArr.push(f.table[o]);
    37  
    38 }
    39  
    40 }else{
    41  
    42 tab = tab || 'table';
    43  
    44 f.table = document.querySelector(tab);
    45  
    46 f.table.length = 1;
    47  
    48 tabArr.push(f.table);
    49  
    50 }
    51  
    52 for(var p = 0; p < tabArr.length; p += 1){
    53  
    54 actionTable(tabArr[p]);
    55  
    56 }
    57  
    58 //给数组直接绑定方法
    59 f.table.getTableXY = function(x,y,type){
    60  
    61 var tableAllArr = [],
    62 temp = parameter(x,y,type);
    63  
    64 x = temp.x;
    65  
    66 y = temp.y;
    67  
    68 type = temp.type;
    69  
    70  
    71 if(tabArr.length == 1){
    72  
    73 return actionTable(tabArr[0]).getTableXY(x,y,type);
    74  
    75 }else{
    76  
    77 for(var p = 0; p < tabArr.length; p += 1){
    78  
    79 tableAllArr.push(actionTable(tabArr[p]).getTableXY(x,y,type));
    80  
    81 }
    82  
    83 return tableAllArr;
    84  
    85 }
    86  
    87 }
    88  
    89 function actionTable(obj){
    90  
    91 var f = obj;
    92  
    93 //获取当前table所有tr,td,th
    94 f.refreshTable = function(){
    95  
    96 f.tableTr = obj.querySelectorAll('tr');
    97  
    98 f.tableTd = obj.querySelectorAll('td');
    99  
    100 f.tableTrLength = f.tableTr.length;
    101  
    102 f.tableTdLength = f.tableTd.length;
    103  
    104 };
    105  
    106 f.refreshTable();
    107  
    108 //给所有td绑定唯一标识
    109 f.tableCard = function(){
    110  
    111 var i = 0,k = 0,
    112 everyTrChild,
    113 everyTrChildLength;
    114  
    115 //可能对table做出增删操作,重新获取,
    116 f.refreshTable();
    117  
    118 for(i; i < f.tableTrLength; i += 1){
    119  
    120 //为每一个td绑定独立ID
    121 f.bindXY(f.tableTr[i],i);
    122  
    123 }
    124  
    125 };
    126  
    127 //为每一个td绑定独立ID
    128 f.tableTdArr= [];
    129  
    130 f.bindXY = function(tr,i){
    131  
    132 var td = tr.querySelectorAll('td'),
    133 tdLen = td.length;
    134  
    135 for(var n = 0; n < tdLen; n += 1){
    136  
    137 td[n].tableX = i;
    138  
    139 td[n].tableY = n;
    140  
    141 td[n].tableXY = [i,n];
    142  
    143 f.tableTdArr.push(td[n]);
    144  
    145 }
    146  
    147 };
    148  
    149 f.tableCard();
    150  
    151  
    152 //获取元素方法
    153 f.getTableXY = function(x,y,type){
    154  
    155 var temp = parameter(x,y,type);
    156  
    157 x = temp.x;
    158  
    159 y = temp.y;
    160  
    161 type = temp.type;
    162  
    163 //取出精确坐标
    164 if(type && type == 'all' || (x && y && y != 'all' && !type)){
    165  
    166 type = 'all';
    167  
    168 return f.eachTable(x,y,type);
    169  
    170 }else{
    171  
    172 return f.eachTable(x,y);
    173  
    174 }
    175  
    176 };
    177  
    178 //循环比较找出符合条件的元素
    179 f.eachTable = function(x,y,type){
    180  
    181 if(type && type == 'all'){
    182  
    183 for(var i = 0; i < f.tableTdArr.length; i += 1){
    184  
    185  
    186 if(x == f.tableTdArr[i].tableXY[0] && y == f.tableTdArr[i].tableXY[1]){
    187  
    188 f.success = f.tableTdArr[i];
    189  
    190 break;
    191  
    192 }
    193  
    194 }
    195  
    196 }
    197  
    198 if(y == 'tr'){
    199  
    200 for(var n = 0; n < f.tableTdArr.length; n += 1){
    201  
    202 if(x == f.tableTdArr[n].tableX){
    203  
    204 f.success = f.tableTdArr[n].parentNode;
    205  
    206 break;
    207  
    208 }
    209  
    210 }
    211  
    212 }
    213  
    214 if(y == 'td'){
    215  
    216 f.success = [];
    217  
    218 for(var m = 0; m < f.tableTrLength; m += 1){
    219  
    220 var tbtr = f.tableTr[m].querySelectorAll('td');
    221  
    222 //console.log(tbtr);
    223  
    224 for(k = 0; k < tbtr.length; k += 1){
    225  
    226 if(x == tbtr[k].tableY){
    227  
    228 f.success.push(tbtr[k]);
    229  
    230 continue;
    231 }
    232  
    233 }
    234  
    235 }
    236  
    237 }
    238  
    239 return f.success;
    240  
    241 };
    242  
    243 return f;
    244  
    245 }
    246  
    247  
    248 //参数处理
    249 function parameter(x,y,type){
    250  
    251 //避免出现 0 == false
    252 if(x == 0){
    253  
    254 x = '0';
    255  
    256 }
    257  
    258 if(y == 0){
    259  
    260 y = '0';
    261 }
    262  
    263 if(y == null && type == 'tr'){
    264  
    265 y = type;
    266  
    267 }
    268  
    269 if(x == null && type == 'td'){
    270  
    271 x = y;
    272  
    273 y = type;
    274  
    275 }
    276  
    277 return {
    278 x : x,
    279 y : y,
    280 type : type
    281 }
    282  
    283 }
    284  
    285 return f.table;
    286  
    287 };
    288  
    289  

      js包下载地址 点击在线运行 欢迎大家补充,一起探讨!    

    查看原文-摘自大公爵ddamy.com

  • 相关阅读:
    pointcut通配符
    Java设计模式-建造者(Builder)模式
    mybatis 初步使用(IDEA的Maven项目, 超详细)
    静态代理和动态代理
    Java 多线程(五)之 synchronized 的使用
    Java 多线程(四)之守护线程(Daemon)
    HashMap 源码解析(一)之使用、构造以及计算容量
    Java 多线程(三)之线程状态及其验证
    Java 多线程(二)之 Thread 优先级
    Java 多线程之 Thread 类 和 Runnable 接口初步使用
  • 原文地址:https://www.cnblogs.com/webhb/p/5755741.html
Copyright © 2020-2023  润新知