Изменение ширины TD на% с помощью Jquery - PullRequest
Новая
       25

Изменение ширины TD на% с помощью Jquery

0 голосов
/ 23 марта 2020

Я беру электронное письмо и делаю его читабельным на главном сайте. Я не контролирую контент, но должен сделать его мобильным. Мне нужно изменить ширину столбцов таблицы, чтобы быть%, а не px. Таблицы могут быть вложенными. Количество столбцов варьируется, ширина столбцов меняется.

Как получить каждый TD в первом TR каждой таблицы? 

   $("#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, поэтому я могу положиться на такие вещи, как присутствие. Это очень урезанная версия, но она довольно типична для структурирования контента. 

<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>

1 Ответ

0 голосов
/ 24 марта 2020

Я закончил (в основном) ванилью 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]);
                }
            }
        }```
...