CODEWITHSUNDEEP
javascriptjquerycssarrays
Ryan Coolwebs
Ryan Coolwebs

Reputation: 1631

Creating separate arrays from TH data in different tables

I'm having a bit of an issue with some JS/JQuery. I am using some script to create an array from the data within the <TH> tags, then doing some formatting of that data to create new content and styles for a responsive table.

<script>
$( document ).ready(function() {
// Setup an array to collect the data from TH elements
    var tableArray = [];
 $("table th").each(function(index){
    var $this = $(this);
    tableArray[index] = $this.text();
});
   console.log(tableArray); 
alert(tableArray);

// Create class name based on th values and store as variable
    var tableString = tableArray.join();
    tableString = tableString.replace(/,/g, '_')
    tableString = tableString.replace(/ /g, '-')
    var tableClass = ".responsive-table."+tableString;
    console.log(tableClass);

// Push tableClass variable into the table HTML element
   var applyTableClass = tableClass;
   applyTableClass = applyTableClass.replace(/\./gi, " ")  //converts the style declaration into something i can insert into table tag (minus the dots!)
   console.log(applyTableClass);
   $( "table" ).addClass( applyTableClass );

// Create a loop which will print out all the necessary css declarations (into a string variable) based on the amount of TH elements
    var i = 0;
    var styleTag = "";

    while (tableArray[i]) {
        styleTag += tableClass+" td:nth-of-type("+[i+1]+"):before { content: '"+tableArray[i]+"'; }";
        i++;
    }

// Push the styleTag variable into the HTML style tag   
    $('style#jquery-inserted-css').html(styleTag);
    // Below is just a test script to check that values are being collected and printed properly (use for testing)
    //$('#css_scope').html('<p>'+styleTag+'</p>');
});
</script>

This works great when there is a single table within the page, but not if there is additional tables. The reason is that the loop that creates the array keeps going and does not know to stop and return at the end of one table, then create a new array for the next table. I am imagining that I need to set up a loop that creates the arrays as well.

This is where I am quit stuck with my limited scripting skills. Can anyone please suggest a way to get my code to loop through multiple tables, to create multiple arrays which then create separate style declarations?

Upvotes: 0

Views: 68

Answers (1)

Tran Nguyen
Tran Nguyen

Reputation: 1381

You can loop through each table instead of querying all tables at once:

  $( document ).ready(function() {
       $("table").each(function () {
            var tableArray = [];
            $(this).find("th").each(function (index) {
                var $this = $(this);
                tableArray[index] = $this.text();
            });
            console.log(tableArray);
            alert(tableArray);

            // Create class name based on th values and store as variable
            var tableString = tableArray.join();
            tableString = tableString.replace(/,/g, '_')
            tableString = tableString.replace(/ /g, '-')
            var tableClass = ".responsive-table." + tableString;
            console.log(tableClass);

            // Push tableClass variable into the table HTML element
            var applyTableClass = tableClass;
            applyTableClass = applyTableClass.replace(/\./gi, " ")  //converts the style declaration into something i can insert into table tag (minus the dots!)
            console.log(applyTableClass);
            $(this).addClass(applyTableClass);

            // Create a loop which will print out all the necessary css declarations (into a string variable) based on the amount of TH elements
            var i = 0;
            var styleTag = "";

            while (tableArray[i]) {
                styleTag += tableClass + " td:nth-of-type(" + [i + 1] + "):before { content: '" + tableArray[i] + "'; }";
                i++;
            }

            // Push the styleTag variable into the HTML style tag   
            $('style#jquery-inserted-css').append(styleTag);
            // Below is just a test script to check that values are being collected and printed properly (use for testing)
            //$('#css_scope').html('<p>'+styleTag+'</p>');
        });
 });

Note that I change $("table th") to $(this).find("th"), $("table") to $(this) and $('style#jquery-inserted-css').html(styleTag); to $('style#jquery-inserted-css').append(styleTag);.

Hope this help.

Upvotes: 1

Related Questions