javascript - Speed up modifying range of table cells (row/column selection) based on attributes -

javascript - Speed up modifying range of table cells (row/column selection) based on attributes -

i writing jquery availability calendar displays massive table. how massive? there thirty-four rows , column every day in past 2 years, current year, , future 2 years. i'll math you: on 62,000 table cells.

yes, loads little slowly, 1 time it's loaded, calendar fits exactly within our needs. there's 1 problem:

users need able select block of cells. have set within ui allow user draw box around grouping of cells, selecting cells within box. it's process of marking them "selected" painfully slow. here's looping code use:

while(r<=thisrow) { for(var c=startcolumn;c<=thiscolumn;c++) { if($(".calendar_slot[row="+r+"][column="+c+"]").attr('selectable')=='yes') { if (toggledirection==0) { $(".calendar_slot[row="+r+"][column="+c+"]").removeclass('selected'); $(".calendar_slot[row="+r+"][column="+c+"]").html(''); } if (toggledirection==1) { $(".calendar_slot[row="+r+"][column="+c+"]").addclass('selected'); $(".calendar_slot[row="+r+"][column="+c+"]").html($(".calendar_slot[row="+r+"][column="+c+"]").attr('label')); } } } r++; }

as can see, i'm having select value of column , row custom attributes. can not embed these cell's id because there process has equal need speed using id value. if id value contained row , column information, other function break, , require utilize of custom attributes, hence running same problem i'm having here.

is there way speed selection process? loop doesn't take long (if comment out jquery stuff, runs super fast). need way of forcing jquery create faster job of performing these tasks based on value of custom attributes.

any ideas?

thanks.

tldr; not seek select each element row column, selectors must painstakingly search many elements , corresponding attributes.

this how initial seek solve it:

first, select first row using jquery - i.e. row = $("#calendar .calendar_slot:first")[0] or whatever appropriate. then, iterate through dom nodes using nextsibling. stop iterating when lastly row index selected reached. imperative loop operation relatively fast under assumption rows dominate columns why recommend simple dom operations , "range scan". (alternatively, might doable in jquery selector syntax using next sibling selector and/or range selectors and/or jquery.slice.)

for each row iterated above, utilize similar to:

$(row).children(".calendar_slot[selectable]").each(function () { var colnum = +this.column if (colnum > x && colnum < y) { var col = $(this) // stuff col here: wrapped once! } }

note selector only executed once per row; in add-on needs @ child elements. unlike iterating rows above, "slower" jquery adequate here , should preferred.

also, consider jquery range selectors; i'd play around both approaches see one(s) meet goals. may case range selectors exclusively mitigate suggestion selecting rows above , might create nice add-on column selector , eliminate explicit conditional.

javascript jquery performance table