[英]Add class to rows and class of a table based on the class in the first row of the table and first column of the table
我想使用jQuery根據類的第一行和第一列向表的其他行和列添加“類”。 例如:
我當前的HTML代碼是:
<table class="numAlpha" border="1">
<tr>
<th bgcolor="#ff9999"></th>
<th class="alpha a" bgcolor="#5588bb">a</th>
<th class="alpha b" bgcolor="#5588bb">b</th>
<th class="alpha c" bgcolor="#5588bb">c</th>
<th class="alpha d" bgcolor="#5588bb">d</th>
<th class="alpha e" bgcolor="#5588bb">e</th>
</tr>
<tr>
<td class="num 1" bgcolor="#5588bb">1</td>
<td name="classAdd">Dexter</td>
<td name="classAdd">Rita</td>
<td name="classAdd">Astor</td>
<td name="classAdd">Cody</td>
<td name="classAdd">Harrison</td>
</tr>
<tr>
<td class="num 2" bgcolor="#5588bb">2</td>
<td name="classAdd">Debra</td>
<td name="classAdd">Quinn</td>
<td name="classAdd">Angel</td>
<td name="classAdd">LaGuerta</td>
<td name="classAdd">Masuka</td>
</tr>
<tr>
<td class="num 3" bgcolor="#5588bb">3</td>
<td name="classAdd">Chuck</td>
<td name="classAdd">Sarah</td>
<td name="classAdd">Casey</td>
<td name="classAdd">Ellie</td>
<td name="classAdd">Awesome</td>
</tr>
<tr>
<td class="num 4" bgcolor="#5588bb">4</td>
<td name="classAdd">Castle</td>
<td name="classAdd">Kate</td>
<td name="classAdd">Espisito</td>
<td name="classAdd">Ryan</td>
<td name="classAdd">Captain</td>
</tr>
<tr>
<td class="num 5" bgcolor="#5588bb">5</td>
<td name="classAdd">Bones</td>
<td name="classAdd">Booth</td>
<td name="classAdd">Hodgins</td>
<td name="classAdd">Angela</td>
<td name="classAdd">Sweets</td>
</tr>
</table>
我希望我的代碼在單擊按鈕時顯示:
<table class="numAlpha" border="1">
<tr>
<th bgcolor="#ff9999"></th>
<th class="alpha a" bgcolor="#5588bb">a</th>
<th class="alpha b" bgcolor="#5588bb">b</th>
<th class="alpha c" bgcolor="#5588bb">c</th>
<th class="alpha d" bgcolor="#5588bb">d</th>
<th class="alpha e" bgcolor="#5588bb">e</th>
</tr>
<tr>
<td class="num 1" bgcolor="#5588bb">1</td>
<td name="classAdd" class="1a">Dexter</td>
<td name="classAdd" class="1b">Rita</td>
<td name="classAdd" class="1c">Astor</td>
<td name="classAdd" class="1d">Cody</td>
<td name="classAdd" class="1e">Harrison</td>
</tr>
<tr>
<td class="num 2" bgcolor="#5588bb">2</td>
<td name="classAdd" class="2a">Debra</td>
<td name="classAdd" class="2b">Quinn</td>
<td name="classAdd" class="2c">Angel</td>
<td name="classAdd" class="2d">LaGuerta</td>
<td name="classAdd" class="2e">Masuka</td>
</tr>
<tr>
<td class="num 3" bgcolor="#5588bb">3</td>
<td name="classAdd" class="3a">Chuck</td>
<td name="classAdd" class="3b">Sarah</td>
<td name="classAdd" class="3c">Casey</td>
<td name="classAdd" class="3d">Ellie</td>
<td name="classAdd" class="3e">Awesome</td>
</tr>
<tr>
<td class="num 4" bgcolor="#5588bb">4</td>
<td name="classAdd" class="4a">Castle</td>
<td name="classAdd" class="4b">Kate</td>
<td name="classAdd" class="4c">Espisito</td>
<td name="classAdd" class="4d">Ryan</td>
<td name="classAdd" class="4e">Captain</td>
</tr>
<tr>
<td class="num 5" bgcolor="#5588bb">5</td>
<td name="classAdd" class="5a">Bones</td>
<td name="classAdd" class="5b">Booth</td>
<td name="classAdd" class="5c">Hodgins</td>
<td name="classAdd" class="5d">Angela</td>
<td name="classAdd" class="5e">Sweets</td>
</tr>
</table>
我的jQuery:
var numbers = new Array();
var alphas = new Array();
$('.exportBtn').click(function(event) {
$('.numAlpha .alpha').each(function() {
alphas.push(($(this).attr('class')).slice(6));
});
$('.numAlpha .num').each(function() {
numbers.push(($(this).attr('class')).slice(4));
});
for (i = 0; i <= numbers.length; i++) {
for (j = 0; j = < alphas.length; j++) {
alert(numbers[i] + "," + alphas[j]);
}
}
});
這是我的小提琴
您可以按照以下步驟進行操作。
$('.exportBtn').click(function(event) {
var first = $('.numAlpha th.alpha').map(function() {
return $(this).attr('class').split(' ')[1];
}).get();
$('.numAlpha tr').not(':first').each(function() {
var num = $(this).find('td:first').attr('class').split(' ')[1];
$(this).find('td').not(':first').each(function(i) {
$(this).addClass(num + first[i]);
});
});
});
我打算提出一種稍微不同的方法。 由於您已經知道列名,並且我假設這些列是按順序編號的,因此此代碼可以正常工作( demo ):
$(function() {
var alphas = ['a', 'b', 'c', 'd', 'e'];
$('.exportBtn').click(function() {
console.log('ok');
var i, j,
$table = $('.numAlpha'),
// ignore first row
$rows = $table.find('tr:gt(0)'),
// get number of columns
columns = alphas.length,
len = $rows.length;
for (i = 0; i < len; i++) {
for (j = 0; j < columns; j++) {
// use j+1 to skip first column
$rows.eq(i).find('td')[j+1].className = alphas[j] + (i+1);
}
}
});
});
注意: bgcolor
可以使用,但是在大多數瀏覽器中不再支持。 所以用css代替
th, td:nth-child(1) {
background: #5588bb;
}
th:nth-child(1) {
background: #ff9999;
}
這是基於html標簽th / td的解決方案
var alphas = [];
var num;
$('.exportBtn').click(function(event) {
$('.numAlpha th').each(function(i, el) {
if($(el).attr('class'))
alphas.push($(el).attr('class').slice(6));
});
$('.numAlpha td').each(function(i, el) {
if($(el).attr('class')){
num = $(el).attr('class').slice(4);
}else{
$(el).addClass(num + alphas[(i-1)]);
}
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.