将javascript变量附加到HTML属性

Question

I have multiple tables which are output via a php function. The tables are then to be formatted with the DataTables plugin, which requires me to reference the table ID's after the document is ready:

$(document).ready( function () {
   for (i = 0; i < ntables; i++) { 
       $('#Main_Data_Table'+i).DataTable();
   }
} );

So when I'm creating the tables I simply want to append the table number (ntables) to the id kind of like the following:

<script>ntables++;</script>
<table id="Main_Data_Table<script>echo ntables</script>" class="display">

I'm used to using PHP, hence the echo which of course doesn't work. How do I simply append the ntables variable to the ID when I'm creating the tables?

Answer 1

If you want to create HTML elements with dynamic IDs, you need to do use a loop in a programming language. You can use a server-side script to create the HTML, or build all the tables in Javascript:

for (var i = 0; i < ntables; i++) {
    $("#container").append($("<table>", { 
        id: "Main_Data_Table_" + i,
        "class": "display"
    }).DataTable());
}

Answer 2

JS way

$(document).ready( function () {

    var tables = $("table.display");

    for(i = 1; i <= tables.length; i++){
      $(tables[i]).attr("id", "Main_Data_Table"+i);
    }    

} );

So in your php code you would just need to generate a bunch of tables with class="display"

Answer 3

The best way is to add id directly from PHP when you are printing tables. If, for some reason, this is not possible, then you could try .getElementsByClassName("some class") then change each element id.