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

我试图循环遍历表中的每一列，获取该列中最大单元格的宽度，并将该宽度值插入数组中

我的桌子看起来像

因此，第一列姓名中的最大单元格应为Brielle Williamson，第一列职位中的最大单元格应为首席执行官（CEO），依此类推

我将这些单元格的宽度插入一个数组中，这个数组看起来像

var widths=[“70”、“90”、“60”、…]

这是我的密码


var max=0；
var i=0；
var j=0；
var-arr=[]；
对于（i=1；i<7；i++）{
$（'table tbody tr td:n个子（'+i+'））。每个（函数（）{
max=Math.max（$（this.width（），max）；}）；
arr[j]=最大值；
j=j+1；
} 
警报（JSON.stringify（arr））

名称
位置
办公室
年龄
开始日期
薪水
佐藤航空
会计
东京
33
2008/11/28
$162,700
当归
首席执行官（CEO）
伦敦
47
2009/10/09
$1,200,000
阿什顿考克斯
初级技术作者
旧金山
66
2009/01/12
$86,000
布拉德利·格里尔
软件工程师
伦敦
41
2012/10/13
$132,000
布伦登·瓦格纳
软件工程师
旧金山
28
2011/06/07
$206,850
布里尔·威廉姆森
集成专家
纽约
61
2012/12/02
$372,000
这是因为您始终保持列之间的最大值：

max=Math.max（$（this.width（），max）；}）

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

另外，如果您有一个不必要的循环，请改为尝试此循环（不使用
for
）：

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


const columns=$（“tbody tr:first td”）.map（函数（i）{
返回$（this）.width（）
}).get（）；
console.log（列）

名称
位置
办公室
年龄
开始日期
薪水
佐藤航空
会计
东京
33
2008/11/28
$162,700
当归
首席执行官（CEO）
伦敦
47
2009/10/09
$1,200,000
阿什顿考克斯
初级技术作者
旧金山
66
2009/01/12
$86,000
布拉德利·格里尔
软件工程师
伦敦
41
2012/10/13
$132,000
布伦登·瓦格纳
软件工程师
旧金山
28
2011/06/07
$206,850
布里尔·威廉姆森
集成专家
纽约
61
2012/12/02
$372,000
纯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);

var trs=document.querySelectorAll（'tbody tr'），
cols=0，//列长度
rows=trs.length，//rows-length
res=[]，//结果
txt=[]；//文本值
对于（var i=0；i而言，问题在于所有列都使用相同的
max
值

将
var max=0；
移动到
for
循环的
内部（或者更准确地说，每次都将其重置为
0
，这取决于js作用域的工作方式）


var i=0；
var j=0；
var-arr=[]；
var-max；
对于（i=1；i<7；i++）{
max=0；
$（'table tbody tr td:n个子（'+i+'））。每个（函数（）{
max=Math.max（$（this）.width（），max）；
});
arr[j]=最大值；
j=j+1；
}
警报（JSON.stringify（arr））；
th{text align:left}

名称
位置
办公室
年龄
开始日期
薪水
佐藤航空
会计
东京
33
2008/11/28
$162,700
当归
首席执行官（CEO）
伦敦
47
2009/10/09
$1,200,000
阿什顿考克斯
初级技术作者
旧金山
66
2009/01/12
$86,000
布拉德利·格里尔
软件工程师
伦敦
41
2012/10/13
$132,000
布伦登·瓦格纳
软件工程师
旧金山
28
2011/06/07
$206,850
布里尔·威廉姆森
集成专家
纽约
61
2012/12/02
$372,000
代码的问题是，在新列的每次迭代中，您都应该将
max
变量的值重置为0。

但仍有许多方面需要重新构建代码


var max=0；
var i=0；
var j=0；
var-arr=[]；
对于（i=1；i<7；i++）{
max=0；//您得到的是单元格的宽度，当然，但在表中，单元格的大小会自动调整为适合最大的元素。因此，您获取的任何单元格的大小都将始终与其他单元格的大小相同。您希望调整的宽度是多少
        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);