使用 Jquery 将 TD 宽度更改为 %答案

【问题标题】：Changing TD width to % using Jquery使用 Jquery 将 TD 宽度更改为 %
【发布时间】：2020-07-03 18:20:47
【问题描述】：

我正在接收一封电子邮件并使其在主网站上可读。我无法控制内容，但需要使其适合移动设备。我需要将表格列的宽度更改为 % 而不是 px。表格可以嵌套。列数不同，列宽不同。

如何在每个表的第一个 TR 中获取每个 TD？

   $("#emailer table").each(function (index) {
      // the table is now a % not px
      $(this).width('100%');

      // get the column widths
      var widths = [];

      var row = $(this).children('tr:first');
      $(row).first-child.children('td').each(function(){
         console.log('td width: '+$(this).width()); 
         widths.push($(this).width;
      });

      console.log(width_details);
    // next steps - add up the widths, convert to % then loop back through and update

   });

编辑：表格代码是由 ckedit 创建的，所以我可以依赖 tbody 之类的东西。这是一个非常精简的版本，但内容的结构方式相当典型。

<table border="0" cellpadding="0" cellspacing="0" style="width: 100%;">
  <tbody>
    <tr>
      <td style="width:209px">
        <p><img alt="" src=""></p>
        <p><img alt="" src=""></p>
      </td>
      <td style="width:3px">&nbsp;</td>
      <td style="width:522px">
        <h2><strong>A reminder of the new ...</strong></h2>

        <p>We announced just before Christmas that ...</p>
      </td>
    </tr>
    <tr>
      <td style="width:209px">
        <p><img src=""></p>
      </td>
      <td style="width:3px">&nbsp;</td>
      <td style="width:522px">
        <p><strong>Special 25% price reduction</strong></p>
      </td>
    </tr>
    <tr>
      <td colspan="3">
        <a href=""><img src=""></a>
      </td>
    </tr>
    <tr>
      <td style=" width:209px">
        <p><img src=""></p>
      </td>
      <td style="width:3px">&nbsp;</td>
      <td style="width:522px">
        <p>The draft ...</p>
      </td>
    </tr>
    <tr>
      <td colspan="3">
        <p>
          <a href=""></a>
        </p>
        <table border="0" cellpadding="1" cellspacing="1" style="width:715px">
          <tbody>
            <tr>
              <td colspan="5" style="width:733.13px">
                <p><a href="">text</a></p>
              </td>
            </tr>
            <tr>
              <td colspan="5" style="width:733.13px">
              </td>
            </tr>
          </tbody>
        </table>
        <table border="0" cellpadding="0" cellspacing="0" style="width:728px">
          <tbody>
            <tr>
              <td>
                <p><strong>Regular Links</strong></p>
              </td>
              <td>&nbsp;</td>
              <td>
                <p><a href="">National Statistics</a></p>
              </td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </tbody>
</table>

【问题讨论】：

您能提供我们表格中的 html 代码吗？
@SametC 在上面添加。
$(row).first-child. 应该抛出语法错误，因为 JavaScript 会将其读取为 $(row).first - child，即“函数引用减去变量 child”。
了解调试这里 developers.google.com/web/tools/chrome-devtools/javascript
row 定义在哪里？

标签： jquery each children

【解决方案1】：

我最终选择了（主要是）vanilla javascript。我完全是在想这个问题。


        for (var i = 0; i < tables.length; i += 1) {
            var table = tables[i];
            var origTableWidth = $(table).width();

            $(table).width('100%');
            var rowLength = table.rows.length;
            for (var j = 0; j < rowLength; j += 1) {
                var row = table.rows[j];
                var cellLength = row.cells.length;

                if (j === 0) {
                    var width_details = [];
                    for (var k = 0; k < cellLength; k += 1) {
                        width_details.push(getNewWidths(row.cells[k]));
                    }
                }

                for (var k = 0; k < cellLength; k += 1) {
                    var cell = row.cells[k];
                    $(cell).width(width_details[k]);
                }
            }
        }```

【讨论】：