文章/答案/技术大牛

发布

社区首页 >问答首页 >获取表Javascript / Jquery中每一列的最大宽度

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

Stack Overflow用户

提问于 2018-06-04 14:02:10

回答 5查看 1.8K关注 0票数 0

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

我的桌子看起来像这

因此，第一列名称中最大的单元应该是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>

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

javascript

jquery

html

回答 5

Stack Overflow用户

回答已采纳

发布于 2018-06-04 14:36:07

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

在var max = 0;循环中移动for (或者更正确地说，每次都将其重置为0，这是因为js的作用域是如何工作的)。

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>

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

票数 0

Stack Overflow用户

发布于 2018-06-04 14:15:43

这是因为您总是在这里保留列之间的最大值：

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

因此，201重复了自己。如Rajit的注释中所述，您的列会自动设置为max单元格的最大宽度，因此您不需要自己做。

另外，您有一个不必要的循环，尝试以下操作(不使用for)：

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

票数 0

Stack Overflow用户

发布于 2018-06-04 14:18:07

您可以在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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50682422

复制

相似问题

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

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 5

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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