在網(wǎng)頁開發(fā)中,我們經(jīng)常遇到需要設置表格的列寬相等的情況。使用jQuery可以快速實現(xiàn)這一功能。
首先,我們需要獲取表格中每一列的寬度。可以使用以下代碼:
var colWidths = []; $('table tr:eq(0) td').each(function() { colWidths.push($(this).width()); });
上面的代碼先定義了一個空數(shù)組colWidths,然后使用each()方法遍歷表格中第一行的每個單元格,將它們的寬度添加到數(shù)組中。
接下來,我們需要將表格中每一列的寬度設置為最大值。可以使用以下代碼:
$('table tr').each(function() { $(this).find('td').each(function(i) { $(this).width(colWidths[i]); }); });
上面的代碼使用了雙重循環(huán)遍歷了表格中的每行每列,并將每列的寬度設置為colWidths數(shù)組中對應位置的值。
最后,我們需要在頁面加載后自動執(zhí)行以上代碼。可以使用以下代碼實現(xiàn):
$(document).ready(function() { // 上面的兩段代碼 });
上面的代碼使用了jQuery的ready()函數(shù),當頁面加載完成后自動執(zhí)行代碼塊內(nèi)的內(nèi)容。