月份: 2012 年 9 月

學 javascript 沒多久，剛開始只是很簡單的置換文字、為元素加上類別，短短幾行沒什麼感覺。到了開始動態新增表格資料時，javascript 程式碼裡面參雜 HTML 就越看越噁心。

function addRow( data ){
   $('#user-list > tbody ').append(
         '<tr> ' + 
            '<td>' + id + '</td>' +
            '<td>' + username + '</td>' +
            '<td>' + email + '</td>' +
         '</tr>'
      );
}

這樣的寫法除了可讀性很低以外，之後若修改表格結構以及 CSS 樣式時，必須同時修改樣板以及 javascript 內容，不容易維護。

今天翻了翻 jQuery docs，發現幾個方法拿出來用可以把 HTML 和 javascript 切割的頗乾淨。

先定義一列當作表格樣板，可以在 CSS 將這一列隱藏：

<table border="1">
  <tbody>
    <tr id="template" style="display: none;">
      <td class="id some-other-class"> </td>
      <td class="username"> </td>
      <td class="email"> </td>
    </tr>
  </tbody>
</table>

新增一列時，將 template 複製一份出來，再依照 class 名稱將資料填入不同欄位：

function addRow(){
  $('tr:last').after( $('#template').clone().removeAttr('id') );
  $('tr:last > td.id').text( id );
  $('tr:last > td.username').text( username );
  $('tr:last > td.email').text( email );
}