javascript更新大表的行

Question

I have a very large table (5000+ rows) and the user has the option to delete a cell and shifts cells below it up...

see this as an actual example of such table

The table is like this

<table border="1" id="align"><table id="section0"><tr id="0">
<td><input type="checkbox" id="s0" value="s0" onclick="add(this);"></td>
<td id="num_s0">0</td>
<td id="seg_s0">Sixty-fifth session</td>
<td id="seg_t0">65 session</td>
<td id="num_t0">0</td>
<td><input type="checkbox" id="t0" value="t0" onclick="add(this);"></td>
</tr>

<tr id="797">
<td><input type="checkbox" id="s797" value="s797" onclick="add(this);"></td>
<td id="num_s797">797</td>
<td id="seg_s797">—</td>
<td id="seg_t797">achievements</td>
<td id="num_t797">797</td>
<td><input type="checkbox" id="t797" value="t797" onclick="add(this);"></td>
</tr><tr id="798">
<td><input type="checkbox" id="s798" value="s798" onclick="add(this);"></td>
<td id="num_s798">798</td>
<td id="seg_s798">—</td>
<td id="seg_t798">مؤشرات الإنجاز</td>
<td id="num_t798">798</td>
<td><input type="checkbox" id="t798" value="t798" onclick="add(this);"></td>
</tr>

</table>
</table>

and so when you check the checkbox in any of the rows, it should invoke the function add

function add(el)
    {
    var el_type=el.id[0];
    var el_number=Number(el.id.slice(1));
    if (el.checked==true){
    var row_obj=item(el.id).parentNode.parentNode
    var row_number=row_obj.id
    var next_row_obj=row_obj.nextSibling
    var section_table_obj=item(el.id).parentNode.parentNode.parentNode.parentNode
    alert('row number: '+row_number+ 'table id: '+section_table_obj.id+ ' Next row: '+row_obj.nextSibling.id)
    while (next_row_obj){
        new_next_row_obj=next_row_obj.nextSibling
        next_row_obj.innerHTML=new_next_row_obj.innerHTML
        next_row_obj=new_next_row_obj

        }
    }

so, once you select any checkbox, the function retrieves its parent row, and then updates the below rows. I have few problems, though:

1- The browser waits till the end of the loop to update each following row, so it takes a long time 5-10 seconds till each action is completed. I want to update the table after each iteration.

2- I do not want to shift the whole row down, but only the side selected (the three left or the three right . So how can I select particular TDs within the selected row and update their innerHTML according to respective TDs from the following rows (and vice versa)?

3- I want to eventually be able to select multiple cells and delete them, so I do not want to be stuck with updating the rows acording to the contents of the following siblings, but rather the siblings after an offset n rows... how can I do this?

(should I split these questions into three separate questions better?)

Answer 1

First of all using integers as ID is not allowed <tr id="797"> should be <tr id="tr797"> or similar.

Your biggest issue in this example is that the DOM (the rendered html source) is very slow to iterate. You will never get this up in speed with the current pattern and chosen programming technique. You should somehow, maybe meanwhile you render the DOM or before that, construct an array or JSON with your data.

An example of the json would be

var example = {
    "rows": [
        {
            "row": "tr797",
            "checkbox1": "s797",
            "checkbox2": "t797"
        },
        {
            "row": "tr798",
            "checkbox1": "s798",
            "checkbox2": "t798"
        },
    ]
}

Also, instead of the onclick="add(this);" command that requires the browser to iterate the DOM at each click you should consider an event handler or help the code by doing something like onclick="add('s797');"

Combining the above you will need some methods to find in this JSON and its data structure

function find(elementId, elementName) {
    var items = example.rows.filter(function (item) {
        return item[elementName] === elementId;
    });

    return items.length == 1 ? items[0] : null;
};

To use this implement the following pattern on your onclicks onclick="add('tr797', "row");" ... onclick="add('s798', "checkbox");" .

Well, of course you'll need to extend the JSON with all the data you are selecting in your routine but that should be pretty easy, it'll be quite fast anyway!

Answer 2

I don't really get what you're trying to do when you check a checkbox. It seems that you're removing the row below it, but in a strange way. Every time you check a checkbox, you delete the contents of a row in the bottom. Wouldn't it be easier to just remove a row, instead of updating every row in the table?

Anyway, if what you want is to 'see' the rows updating, you will have to split your updating loop to give time to the browser to render. The best way to achieve this is by using requestAnimationFrame, though it isn't supported in IE9 and below. Basically, requestAnimationFrame acts similarly to setTimeout (which you can use if you need to support older browsers), but instead of executing after a period of time, it will execute next time the browser needs to render a frame (synchronously with vertical sync).

So you should create a function like this:

var row_obj = null;
var next_row_obj= null;
var new_next_row_obj;
function add(this) {
   var el_type=el.id[0];
   var el_number=Number(el.id.slice(1));
   if (el.checked==true){
      row_obj=item(el.id).parentNode.parentNode
      var row_number=row_obj.id
      next_row_obj=row_obj.nextSibling;
      if (next_row_obj) requestAnimationFrame(processChunk);
   }
}

function processChunk() {
    var i = 0;
    while (next_row_obj && i < 10){
       new_next_row_obj=next_row_obj.nextSibling
       next_row_obj.innerHTML=new_next_row_obj.innerHTML
       next_row_obj=new_next_row_obj;
       i++;
    }
    //if there are more elements, call it again.
    if (new_next_row_obj) requestAnimationFrame(processChunk);
    else {
       row_obj = next_row_obj = new_next_row_obj = null;
    }
}

With this code, ten rows will be updated and then the browser will have time to show the changes. You could change requestAnimationFrame for setTimeout(processChunk, 10). the problem is that if you check another checkbox before the process completes, some rows could be in an inconsistent state, so you'll have to take care with that.