從不同的表中TH數據創建單獨的數組

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);。

希望得到這個幫助。