Question

我在使用一些JS / JQuery时遇到了一些问题。我正在使用一些脚本从<TH>标签中的数据创建一个数组，然后对该数据进行一些格式化，以便为响应表创建新的内容和样式。

<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>

当页面中有一个表时，这很有效，但如果有其他表则不行。原因是创建数组的循环继续运行，并且不知道在一个表的末尾停止并返回，然后为下一个表创建一个新数组。我想我需要设置一个创建数组的循环。

这是我放弃我有限的脚本技能的地方。任何人都可以建议一种方法来让我的代码循环遍历多个表，创建多个数组，然后创建单独的样式声明？

Answer 1

您可以遍历每个表，而不是一次查询所有表：

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

请注意，我将$("table th")更改为$(this).find("th")，将$("table")更改为$(this)，将$('style#jquery-inserted-css').html(styleTag);更改为$('style#jquery-inserted-css').append(styleTag);。

希望得到这个帮助。

从不同表中的TH数据创建单独的数组

1 个答案: