打字時如何使表格中所有單元格的生長高度相同？

Question

嗨，你能幫我嗎？當我寫高度時需要單元格以增加我正在輸入的高度

正如您在照片上看到的那樣，當我在單元格 1 上鍵入時，我希望其他列增加，我已經用紅色邊框做了我需要的樣子。

 $("textarea").each(function () { this.addEventListener('keydown', autosize); function autosize() { var el = this; setTimeout(function () { el.style.cssText = 'height:auto; '; el.style.cssText = 'height:' + el.scrollHeight + 'px'; }, 0); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <table class="matrix__table"> <thead> <tr class="matrix__table--columns"> <th></th> <th> <textarea placeholder="Column 1" class="form__input text-area" rows="1"></textarea> </th> <th> <textarea placeholder="Column 2" class="form__input text-area" rows="1"></textarea> </th> <th> <textarea placeholder="Column 3" class="form__input text-area" rows="1"></textarea> </th> <th> <textarea placeholder="Column 4" class="form__input text-area" rows="1"></textarea> </th> <th> <textarea placeholder="Column 5" class="form__input text-area" rows="1"></textarea> </th> </tr> </thead> <tbody> <tr> <td class="matrix__table--row-cell"> <textarea placeholder="Row 1" class="form__input text-area" rows="1"></textarea> </td> <td> <input type="radio" class="form__radio-input" id="row1col1" name="all"> <label class="form__radio-label" for="row1col1"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row1col2" name="all"> <label class="form__radio-label" for="row1col2"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row1col3" name="all"> <label class="form__radio-label" for="row1col3"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row1col4" name="all"> <label class="form__radio-label" for="row1col4"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row1col5" name="all"> <label class="form__radio-label" for="row1col5"> <span class="form__radio-button"> </span> </label> </td> </tr> <tr> <td class="matrix__table--row-cell"> <textarea placeholder="Row 2" class="form__input text-area" rows="1"></textarea> </td> <td> <input type="radio" class="form__radio-input" id="row2col1" name="all2"> <label class="form__radio-label" for="row2col1"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row2col2" name="all2"> <label class="form__radio-label" for="row2col2"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row2col3" name="all2"> <label class="form__radio-label" for="row2col3"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row2col4" name="all2"> <label class="form__radio-label" for="row2col4"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row2col5" name="all2"> <label class="form__radio-label" for="row2col5"> <span class="form__radio-button"> </span> </label> </td> </tr> <tr> <td class="matrix__table--row-cell"> <textarea placeholder="Row 3" class="form__input text-area" rows="1"></textarea> </td> <td> <input type="radio" class="form__radio-input" id="row3col1" name="all"> <label class="form__radio-label" for="row3col1"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row3col2" name="all"> <label class="form__radio-label" for="row3col2"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row3col3" name="all"> <label class="form__radio-label" for="row3col3"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row3col4" name="all"> <label class="form__radio-label" for="row3col4"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row3col5" name="all"> <label class="form__radio-label" for="row3col5"> <span class="form__radio-button"> </span> </label> </td> </tr> <tr> <td class="matrix__table--row-cell"> <textarea placeholder="Row 4" class="form__input text-area" rows="1"></textarea> </td> <td> <input type="radio" class="form__radio-input" id="row4col1" name="all"> <label class="form__radio-label" for="row4col1"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row4col2" name="all"> <label class="form__radio-label" for="row4col2"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row4col3" name="all"> <label class="form__radio-label" for="row4col3"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row4col4" name="all"> <label class="form__radio-label" for="row4col4"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row4col5" name="all"> <label class="form__radio-label" for="row4col5"> <span class="form__radio-button"> </span> </label> </td> </tr> <tr> <td class="matrix__table--row-cell"> <textarea placeholder="Row 5" class="form__input text-area" rows="1"></textarea> </td> <td> <input type="radio" class="form__radio-input" id="row5col1" name="all"> <label class="form__radio-label" for="row4col1"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row5col2" name="all"> <label class="form__radio-label" for="row4col2"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row5col3" name="all"> <label class="form__radio-label" for="row4col3"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row5col4" name="all"> <label class="form__radio-label" for="row4col4"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row5col5" name="all"> <label class="form__radio-label" for="row4col5"> <span class="form__radio-button"> </span> </label> </td> </tr> </tbody> </table>

我嘗試讓高度自動高度繼承，但似乎沒有任何效果：/你能幫幫我嗎？

Answer 1

您可以展開給定行中的所有文本區域，如下所示：

 $("textarea").each(function () { this.addEventListener('keydown', autosize); function autosize() { var el = this; setTimeout(function () { el.style.cssText = 'height:auto; '; const height = el.scrollHeight + 'px'; //Find the parent TR and apply the height to all child textareas $(el).closest('tr.matrix__table--columns').find('textarea.form__input').css('height', height); }, 0); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <table class="matrix__table"> <thead> <tr class="matrix__table--columns"> <th></th> <th> <textarea placeholder="Column 1" class="form__input text-area" rows="1"></textarea> </th> <th> <textarea placeholder="Column 2" class="form__input text-area" rows="1"></textarea> </th> <th> <textarea placeholder="Column 3" class="form__input text-area" rows="1"></textarea> </th> <th> <textarea placeholder="Column 4" class="form__input text-area" rows="1"></textarea> </th> <th> <textarea placeholder="Column 5" class="form__input text-area" rows="1"></textarea> </th> </tr> </thead> <tbody> <tr> <td class="matrix__table--row-cell"> <textarea placeholder="Row 1" class="form__input text-area" rows="1"></textarea> </td> <td> <input type="radio" class="form__radio-input" id="row1col1" name="all"> <label class="form__radio-label" for="row1col1"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row1col2" name="all"> <label class="form__radio-label" for="row1col2"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row1col3" name="all"> <label class="form__radio-label" for="row1col3"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row1col4" name="all"> <label class="form__radio-label" for="row1col4"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row1col5" name="all"> <label class="form__radio-label" for="row1col5"> <span class="form__radio-button"> </span> </label> </td> </tr> <tr> <td class="matrix__table--row-cell"> <textarea placeholder="Row 2" class="form__input text-area" rows="1"></textarea> </td> <td> <input type="radio" class="form__radio-input" id="row2col1" name="all2"> <label class="form__radio-label" for="row2col1"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row2col2" name="all2"> <label class="form__radio-label" for="row2col2"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row2col3" name="all2"> <label class="form__radio-label" for="row2col3"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row2col4" name="all2"> <label class="form__radio-label" for="row2col4"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row2col5" name="all2"> <label class="form__radio-label" for="row2col5"> <span class="form__radio-button"> </span> </label> </td> </tr> <tr> <td class="matrix__table--row-cell"> <textarea placeholder="Row 3" class="form__input text-area" rows="1"></textarea> </td> <td> <input type="radio" class="form__radio-input" id="row3col1" name="all"> <label class="form__radio-label" for="row3col1"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row3col2" name="all"> <label class="form__radio-label" for="row3col2"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row3col3" name="all"> <label class="form__radio-label" for="row3col3"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row3col4" name="all"> <label class="form__radio-label" for="row3col4"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row3col5" name="all"> <label class="form__radio-label" for="row3col5"> <span class="form__radio-button"> </span> </label> </td> </tr> <tr> <td class="matrix__table--row-cell"> <textarea placeholder="Row 4" class="form__input text-area" rows="1"></textarea> </td> <td> <input type="radio" class="form__radio-input" id="row4col1" name="all"> <label class="form__radio-label" for="row4col1"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row4col2" name="all"> <label class="form__radio-label" for="row4col2"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row4col3" name="all"> <label class="form__radio-label" for="row4col3"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row4col4" name="all"> <label class="form__radio-label" for="row4col4"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row4col5" name="all"> <label class="form__radio-label" for="row4col5"> <span class="form__radio-button"> </span> </label> </td> </tr> <tr> <td class="matrix__table--row-cell"> <textarea placeholder="Row 5" class="form__input text-area" rows="1"></textarea> </td> <td> <input type="radio" class="form__radio-input" id="row5col1" name="all"> <label class="form__radio-label" for="row4col1"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row5col2" name="all"> <label class="form__radio-label" for="row4col2"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row5col3" name="all"> <label class="form__radio-label" for="row4col3"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row5col4" name="all"> <label class="form__radio-label" for="row4col4"> <span class="form__radio-button"> </span> </label> </td> <td> <input type="radio" class="form__radio-input" id="row5col5" name="all"> <label class="form__radio-label" for="row4col5"> <span class="form__radio-button"> </span> </label> </td> </tr> </tbody> </table>