动态将id插入表格元素

如何解决动态将id插入表格元素

我正在从事我认为很简单的项目，但是我一直在努力。我想知道是否有人可以回顾我要做的事情，并为我提供一些有关如何进行的指示。

这里的概念非常简单...我认为-根据“ table”元素识别html文件中的每个表，计算每个表中的行数，如果该表有10行以上，则动态创建表格的唯一ID。

（大多数情况下）我知道如何做到这一切，但它并没有反应我的预期。

这是我最初的javascript代码尝试动态创建并插入唯一的表ID：

/* 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();
      }
   }
}

当我运行上面的js代码时，当我查看Inspect Element Console时没有错误，但是唯一的ID从未插入表元素中。

这应该贯穿HTML代码，标识每个表，然后向每个表动态应用（插入）唯一的ID，但不是。

非常感谢您的帮助。

解决方法

此jQuery选择器将查找具有10个或更多<tr>子级的所有表，并将ID和DataTables应用于每个表。

$(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();
     }
  );
});

这里是一个JSFiddle，它基于您的评论中的on，它演示了这一点： https://jsfiddle.net/5cgbdLzt/2/

在这个小提琴中，我添加了一个按钮，该按钮将向您发出警报ID，您可以清楚地看到少于10行的表的ID为undefined。

注意：：DataTables使用jQuery作为依赖项，因此假定您可以使用jQuery选择器，而不是严格使用原始JS。