获取我的表中 Javascript / Jquery 中每一列的最大宽度

我正在尝试遍历表中的每一列并获取该列中最大单元格的宽度并将该宽度值插入数组中。

我的表格看起来像这样

所以第一列中最大的单元格名称应该是Brielle Williamson，第一列中最大的单元格应该是首席执行官(CEO(等等......

我将这些单元格的宽度插入一个数组中，看起来像这样var widths = ["70", "90", "60",....];

这是我的代码

var max = 0; 
var i = 0;
var j = 0;
var arr = [];

for (i = 1; i < 7; i++) { 
$('table tbody tr td:nth-child('+ i +')').each(function() {
max = Math.max($(this).width(), max); });
arr[j] = max;     
		j = j + 1;    
} 
alert(JSON.stringify(arr));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
</tbody>
</table>

我不明白我的代码有什么问题。它仍然在所有表中获取最大宽度，而不是每列。请问有什么建议吗？

问题是对所有列使用相同的max值。

在for循环内移动var max = 0;(或者，更准确地说，由于 js 作用域的工作方式，每次都将其重置为0(。

var i = 0;
var j = 0;
var arr = [];
var max;
for (i = 1; i < 7; i++) {
max = 0;
$('table tbody tr td:nth-child(' + i + ')').each(function() {
max = Math.max($(this).width(), max);
});
arr[j] = max;
j = j + 1;
}
alert(JSON.stringify(arr));

th {text-align:left}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
</tbody>
</table>

可能有一些方法可以改进您的代码(例如，一列在每行中的宽度相同，因此无需解析所有行(，但问题是它出了什么问题以及为什么它总是给出相同的值。

您可以在tbody中获取第一行，然后使用map方法获取td元素的宽度，其中每个td是一列。

const columns = $("tbody tr:first td").map(function(i) {
return $(this).width()
}).get();
console.log(columns)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
</tbody>
</table>

这是因为您始终在此处的列之间保留最大值：

max = Math.max($(this).width(), max); });.

因此，201重复自己。如 Rajit 的评论中所述，您的列会自动设置为最大单元格的最大宽度，因此您无需自己动手。

另外，你有一个不必要的循环，试试这个(没有for(：

$('table thead tr th').each(function() {
arr[j] = $(this).width();     
j = j + 1;    
}

代码的问题在于，您应该在新列的每次迭代中将变量的值重置为 0max。

仍然有很多地方需要重新构建代码。

var max = 0; 
var i = 0;
var j = 0;
var arr = [];

for (i = 1; i < 7; i++) { 
max =0;//<-- Note this change
$('table tbody tr td:nth-child('+ i +')').each(function() {
max = Math.max($(this).width(), max); 
});
arr[j] = max; 
j = j + 1;    
} 
alert(JSON.stringify(arr));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>2009/10/09</td>
<td>$1,200,000</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2012/10/13</td>
<td>$132,000</td>
</tr>
<tr>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>2011/06/07</td>
<td>$206,850</td>
</tr>
<tr>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
</tbody>
</table>

纯javascript中的示例。

var trs  = document.querySelectorAll('tbody tr'),
cols = 0,           // Columns length
rows = trs.length,  // Rows length
res  = [],          // Result
txt  = [];          // Text values
for(var i=0; i<rows; i++){
var row = trs[i],
tds = row.querySelectorAll('td');
if(res.length == 0){
cols = tds.length;
res  = new Array(cols);
}
for(var e=0; e<tds.length; e++){
var td = tds[e];
// Wrap text to inline element
td.innerHTML = '<span>'+td.innerText+'</span>';
var sp = td.querySelector('span');
if(!res[e] || res[e] < sp.offsetWidth){
res[e] = sp.offsetWidth;
txt[e] = sp.innerText;
}
// Unwarp after calculating
td.innerHTML = td.innerText;
}
}
console.log(res);
console.log(txt);

相关内容

最新更新

热门标签：