循環遍歷每個TR並將屬性添加到TD，其中包含來自TH的陣列數據

Question

我已經用TH值填充了一個數組，並且希望爲每個TR中的每個TD添加一個屬性。我已經設置了一個jsfiddle以使這一切工作。

基本上，我做了以下內容：

//Fill ths array with header text 
$(".table th").each(function() { 
    var thdatatrimmed = trimIt($(this).html()); 
    ths.push(thdatatrimmed); 
}); 

然後拿到TDS和添加屬性：

//total trs 
var trlen = $(".table tr").length; 
console.log(trlen); 
//add header to data-title attribute to each TD 
for (var j = 0; j < trlen; j++) { 
    //console.log(ths.length); 
    for (var i = 0, len = ths.length; i < len; i++) { 
     //console.log(ths[i]); 
     $('td:eq('+i+')').attr("data-title", ths[i]); 
    } 
} 

我的絆腳石是如何將11個THS適用於每一行的TD，然後重置它爲下一行。以上將做到第一個tr> td行，但不是下一個。我錯過了什麼？

Answer 1

試試這個：http://jsfiddle.net/1g33sp22/4/

//array to fill with ths 
 
var ths = new Array(); 
 

 
//Clean the text 
 
function trimIt(x) { 
 
    return x.replace(/(^\s+|\s+$)/g, ''); 
 
} 
 
//Fill ths array with header text 
 
$(".table th").each(function() { 
 
    var thdatatrimmed = trimIt($(this).html()); 
 
    console.log(thdatatrimmed); 
 
    ths.push(thdatatrimmed); 
 
}); 
 

 
//total trs 
 
var trlen = $(".table tr").length; 
 
console.log(trlen); 
 
//add header to data-title attribute to each TD 
 
for (var j = 0; j < trlen; j++) { 
 
    //console.log(ths.length); 
 
    for (var i = 0, len = ths.length; i < len; i++) { 
 
     //console.log(ths[i]); 
 
     $('table tr').eq(j).find('td').eq(i).attr('data-title', ths[i]); 
 
     //$('td:eq('+i+')').attr("data-title", ths[i]); 
 
    } 
 
}

Answer 2

在這裏，你可以試試這個解決方案：

for (var j = 0; j < trlen; j++) { 

    $('.table tr:nth-child('+ (2+j) +')').find('td').each(function(i,v){ 
    $(this).attr("data-title", ths[i]); 
    });  
} 

DEMO

Answer 3

這個解決方案是最簡單的，每列中選擇每td元素一次，而不是選擇像其他人一樣，每一個單獨的一個。它也會更快，因爲在每個元素上運行jQuery函數代價很高。

JSfiddle

//Fill ths array with header text 
$(".table th").each(function() { 
    var thdatatrimmed = trimIt($(this).html()); 
    ths.push(thdatatrimmed); 
}); 

// loop through ths array 
for(var i = 0, l = ths.length; i <= l; i += 1){ 
    // select each column of tds 
    // set the data-value attribute of each element 
    $(".table td:nth-of-type(" + (i + 1) + ")").attr("data-title", ths[i]); 
} 

如果你願意，你可以讓它更簡單的做這樣的：

// loop through the TH elements 
$(".table th").each(function (i) { 
    // get and trim HTML of TH 
    var thdatatrimmed = trimIt($(this).html()); 
    // select each column of TDs 
    $(".table td:nth-of-type(" + (i + 1) + ")") 
     // set the data-value attribute of each element 
     .attr("data-title", thdatatrimmed); 
}); 

JSfiddle for that

Answer 4

//array to fill with ths 
 
var ths = new Array(); 
 

 
//Clean the text 
 
function trimIt(x) { 
 
    return x.replace(/(^\s+|\s+$)/g, ''); 
 
} 
 
//Fill ths array with header text 
 
$(".table th").each(function() { 
 
    var thdatatrimmed = trimIt($(this).html()); 
 
    ths.push(thdatatrimmed); 
 
}); 
 

 
//total trs 
 
var trlen = $(".table tr").length; 
 
console.log(trlen); 
 
console.log(ths); 
 
//add header to data-title attribute to each TD 
 

 
$('.table tr').each(function(){ 
 
\t $(this).find('td').each(function(index,td){ 
 
    \t \t //console.log(td,index); \t 
 
     $(td).attr('data-title',ths[index]); 
 
    }); 
 
});

\t .demo { 
 
\t  border:1px solid #C0C0C0; 
 
\t  border-collapse:collapse; 
 
\t  padding:5px; 
 
\t } 
 
\t .demo th { 
 
\t  border:1px solid #C0C0C0; 
 
\t  padding:5px; 
 
\t  background:#F0F0F0; 
 
\t } 
 
\t .demo td { 
 
\t  border:1px solid #C0C0C0; 
 
\t  padding:5px; 
 
\t } 
 
\t

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<table class="table demo"> 
 
    <tr> 
 
     <th>Table 1</th> 
 
     <th>Table 2</th> 
 
     <th>Table 3</th> 
 
     <th>Table 4</th> 
 
     <th>Table 5</th> 
 
     <th>Table 6</th> 
 
     <th>Table 7</th> 
 
     <th>Table 8</th> 
 
     <th>Table 9</th> 
 
     <th>Table 10</th> 
 
     <th>Table 11</th> 
 
    </tr> 
 
    <tr> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
     <td>Table Cell</td> 
 
    </tr> 
 
</table>