Dynamically insert id into table element

Question

I'm working on what I thought would be a simple project but is something I'm struggling with. I'm wondering if someone could review what I'm trying to do and give me some pointers on how to proceed.

The concept here is fairly simple...I thought - identify each table in an html file based on the "table" element, count the number of rows in each table and if the table has more than 10 rows, dynamically create a unique id for the table.

I know how to do all this (for the most part) but it doesn't respond how I anticipate.

Here's my initial javascript code attempt to dynamically create and insert the unique table id's:

/* This function dynamically sets a unique id to each table found in the html page: */
function set_table_id(){
   var num_tables = document.getElementsByTagName("table"); //determine the number of “table” nodes in the html
   //alert("set_table_id function: The total number of table elements are: " + num_tables.length);

   if (num_tables) { //if one or more table nodes are found…
      var id_name = "dataTbl_"; // create the prepend string for table id value
      var n = 1;
      var i;
      
      //for each table node found…
      for (i=0; i < num_tables.length; i++) {
         var id_name_new = id_name + n; //create the next unique table id from the prepend string
         n++;

         num_tables[i].id = id_name_new; //apply the latest table id to the current table

         //this will be the call to the function to apply the datatables javascript to each table that has more than 10 rows:
         //num_tables[i].dataTable();
      }
   }
}

When I run the above js code there are no errors when I review the Inspect Element Console, but the unique id's never get inserted into the table elements.

This should run through the html code, identify each table and dynamically apply (insert) a unique id to each table but it's not.

Any help is greatly appreciated.

Answer 1

This jQuery selector will find all tables that have 10 or more <tr> children and apply the ID and DataTables to each.

$(document).ready(function() {
  $("table > tbody > tr:nth-child(10)").closest("table").each(function(index) {
        var tableId = "dataTbl_" + (index + 1); //index is zero-based, so add 1
        $(this).attr("id", tableId); //set the ID attribute
        $(this).dataTable();
     }
  );
});

Heres is a JSFiddle, based on the on in your comment, which demonstrates it: https://jsfiddle.net/5cgbdLzt/2/

Within that fiddle, I added a button that will alert the IDs to you, where you can see clearly that the ID of the table with fewer than 10 rows has an ID that is undefined .

Note: DataTables uses jQuery as a dependency, so it's assumed you can use jQuery selectors rather than strictly vanilla JS.