循环遍历每个TR并使用来自TH的阵列数据将属性添加到TD

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 TH应用于TD的每一行，然后将其重置为下一行。以上将对第一个tr＆gt; td行进行，但不对下一行进行。我错过了什么？

Answer 1

试试这个：http://jsfiddle.net/1g33sp22/4/

＆＃13;

＆＃13;

//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]);
    }
}

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

//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(){
	$(this).find('td').each(function(index,td){
  		//console.log(td,index);	
        $(td).attr('data-title',ths[index]);
    });
});

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;