文本區域 - 調整所有的textarea連續

Question

我有HTML如下：

<table border="2"> 
 
    
 
     <tbody><tr> 
 
      <th></th> 
 
      <th>Name</th> 
 
      <th>Address</th> 
 
      <th>Address2</th> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <button type="submit" name="delete" value="6">Delete</button> 
 
      </td> 
 
      <td> 
 
      <section class="SectionClass"> 
 
       <div class="error"></div> 
 
       <div class="inputClass"> 
 
       <input id="3da85a67e4914f09b6f673ed730b16a6_12" name="3da85a67e4914f09b6f673ed730b16a6_12" type="text" value="NAME Here"> 
 
       </div> 
 
      </section> 
 
      </td> 
 
      <td> 
 
      <section class="SectionClass"> 
 
       <div class="error"></div> 
 
       <div class="textAreaClass"> 
 
       <textarea id="943a646acb564069b5ea6aca27bf6693_13" name="943a646acb564069b5ea6aca27bf6693_13">Address 1 
 
    Address Line 2</textarea> 
 
       </div> 
 
      </section> 
 
      </td> 
 
      <td> 
 
      <section class="SectionClass"> 
 
       <div class="error"></div> 
 
       <div class="textAreaClass"> 
 
       <textarea id="15c3a14f3f4644dda6271cfab7e3b244_14" name="15c3a14f3f4644dda6271cfab7e3b244_14">D 
 
    ffsf 
 
    er</textarea> 
 
       </div> 
 
      </section> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
      <button type="submit" name="delete" value="7">Delete</button> 
 
      </td> 
 
      <td> 
 
      <section class="SectionClass"> 
 
       <div class="error"></div> 
 
       <div class="inputClass"> 
 
       <input id="3da85a67e4914f09b6f673ed730b16a6_15" name="3da85a67e4914f09b6f673ed730b16a6_15" type="text" value="DSRE"> 
 
       </div> 
 
      </section> 
 
      </td> 
 
      <td> 
 
      <section class="SectionClass"> 
 
       <div class="error"></div> 
 
       <div class="textAreaClass"> 
 
       <textarea id="943a646acb564069b5ea6aca27bf6693_16" name="943a646acb564069b5ea6aca27bf6693_16">DSS 
 
    fs</textarea> 
 
       </div> 
 
      </section> 
 
      </td> 
 
      <td> 
 
      <section class="SectionClass"> 
 
       <div class="error"></div> 
 
       <div class="textAreaClass"> 
 
       <textarea id="15c3a14f3f4644dda6271cfab7e3b244_17" name="15c3a14f3f4644dda6271cfab7e3b244_17">ewff 
 
    ww 
 
    </textarea> 
 
       </div> 
 
      </section> 
 
      </td> 
 
     </tr> 
 
     </tbody></table>

我可以通過點擊調整上右下角圖標調整textarea的。在調整一個文本區域的大小時，我希望所有其他文本區域（在該行中）的寬度自動調整大小。

例如如果我正在調整地址欄中的任何列的大小，那麼它應該調整所有地址行的大小。相同的地址2

Jquery或CSS解決方案應該沒問題。

Answer 1

<script> 
 
\t $(document).ready(function() { 
 
\t \t // variables 
 
\t \t var x=$('textarea').width(); 
 
\t \t var y=$('textarea').height(); 
 
\t \t 
 
\t \t $('textarea').mouseup(function() { 
 
\t \t \t //for resizing the entire textarea in that particular row. 
 
\t \t \t if ($(this).outerWidth() != x || $(this).outerHeight() != y) { 
 
\t \t \t \t $(this).parents('tr').find('textarea').width($(this).outerWidth()); 
 
\t \t \t \t $(this).parents('tr').find('textarea').height($(this).outerHeight()); 
 
\t \t \t } 
 
\t 
 
\t \t }); 
 
\t }); 
 
</script>