动态表行选择和绑定

Question

I have a table (id=tbl). and do some job on each row when loading.

var loadCheck = function(){
    $('#sTable tbody tr').each(function () {
        do some job...
     });
  }

$(document).ready(function () {
     loadCheck();
 });

It works fine. But there is a button in that page. When click the whole table will be recreate dynamically. This time table rows won't be selected.

The Html code is like below:

<div id="sTable" style="padding-top:10px;">
       <table id='tbl' border="1" class="table table-hover">
          <tr>
            <th>Col1</th>
            <th>Col2</th>
            <th>Col3</th>
          </tr>
         <tbody>
           <tr>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
          </tr>
         </tbody>
      </table>

since the div sTable is static but tbl is dynamic. So I bind the tbody to sTable. but still not work. I was tols use $("sTable").on("load"," tbody tr",function(){}) may be good for dynamic binding. but how to handle the "each" function. Any suggestion?

Answer 1

You could wrap your .each() in another function like:

function iteration() {
    $('#sTable tbody tr').each(function () {
       // do some job...
    });
};

then call it on page load to initialize it:

iteration();

and then also call it inside your button .click() function.