從html表單elemets排序動態創建表

Question

對不起，我的英語。 我是新的在這個，所以我將不勝感激這裏有一點幫助， 我有一個HTML表單，其數據顯示在我的網頁在HTML表格。 每個新的保存表單數據表按表單條目ID排序後。

現在我堅持由animal_id或animal_name.

感謝您的幫助排序和分頁 我怎麼可以通過單擊列標題爲其他數據此表的數據進行排序，例如

這裏驗證碼：

 init: function() { 
       if (!Animals.index) { 
       window.localStorage.setItem("Animals:index", Animals.index = 1); 
      } 
      Animals.$form.reset(); 
      Animals.$button_discard.addEventListener("click", function(event) { 
       Animals.$form.reset(); 
       Animals.$form.id_entry.value = 0; 
      }, true); 
      Animals.$form.addEventListener("submit", function(event) { 
       var entry = { 
     id: parseInt(this.id_entry.value), 
        animal_id:this.animal_id.value, 
     animal_name: this.animal_name.value, 
     animal_type: this.animal_type.value, 
        bday: this.bday.value, 
        animal_sex: this.animal_sex.value, 
        mother_name: this.mother_name.value, 
        farm_name: this.farm_name.value, 
     money: this.money.value, 
     weight: this.weight.value, 
        purchase_partner: this.purchase_partner.value, 

       }; 
       if (entry.id == 0) { // add 
        Animals.storeAdd(entry); 
        Animals.tableAdd(entry); 
       } 
       else { // edit 
        Animals.storeEdit(entry); 
        Animals.tableEdit(entry); 
       } 

       this.reset(); 
       this.id_entry.value = 0; 
       event.preventDefault(); 
      }, true); 


      if (window.localStorage.length - 1) { 
       var animals_list = [], i, key; 
       for (i = 0; i < window.localStorage.length; i++) { 
        key = window.localStorage.key(i); 
        if (/Animals:\d+/.test(key)) { 
         animals_list.push(JSON.parse(window.localStorage.getItem(key))); 
        } 
       } 

       if (animals_list.length) { 
          animals_list.sort(function(a, b) 
          {return a.id < b.id ? -1 : (a.id > b.id ? 1 : 0); 
                  }) 

         .forEach(Animals.tableAdd); 

               } } 


      Animals.$table.addEventListener("click", function(event) { 
       var op = event.target.getAttribute("data-op"); 
       if (/edit|remove/.test(op)) { 
        var entry = JSON.parse(window.localStorage.getItem("Animals:"+ event.target.getAttribute("data-id"))); 
        if (op == "edit") { 
      Animals.$form.id_entry.value = entry.id; 
         Animals.$form.animal_id.value = entry.animal_id; 
      Animals.$form.animal_name.value = entry.animal_name; 
         Animals.$form.animal_type.value = entry.animal_type; 
         Animals.$form.bday.value = entry.bday; 
         Animals.$form.animal_sex.value = entry.animal_sex; 
         Animals.$form.mother_name.value = entry.mother_name; 
      Animals.$form.farm_name.value = entry.farm_name; 
         Animals.$form.money.value = entry.money; 
         Animals.$form.weight.value = entry.weight; 
         Animals.$form.purchase_partner.value = entry.purchase_partner; 

        } 
        else if (op == "remove") { 
if (confirm('Are you sure you want to remove this animal from your list?')) { 
          Animals.storeRemove(entry); 
          Animals.tableRemove(entry); 
         } 
        } 
        event.preventDefault(); 
       } 
      }, true); 
     }, 

     storeAdd: function(entry) { 
      entry.id = Animals.index; 
      window.localStorage.setItem("Animals:index",++Animals.index); 
      window.localStorage.setItem("Animals:"+entry.id,JSON.stringify(entry)); 
     }, 
     storeEdit: function(entry) { 
      window.localStorage.setItem("Animals:"+entry.id,JSON.stringify(entry)); 
     }, 
     storeRemove: function(entry) { 
      window.localStorage.removeItem("Animals:"+ entry.id); 
     }, 

     tableAdd: function(entry) { 
      var $tr = document.createElement("tr"), $td, key; 
      for (key in entry) { 
       if (entry.hasOwnProperty(key)) { 
        $td = document.createElement("td"); 
        $td.appendChild(document.createTextNode(entry[key])); 
        $tr.appendChild($td); 
       } 
      } 
      $td = document.createElement("td"); 
      $td.innerHTML = '<a data-op="edit" data-id="'+ entry.id+'">Edit</a> | <a data-op="remove" data-id="'+ entry.id +'">Remove</a>'; 
      $tr.appendChild($td); 
      $tr.setAttribute("id", "entry-"+ entry.id); 
      Animals.$table.appendChild($tr); 
     }, 
     tableEdit: function(entry) { 
     var $tr = document.getElementById("entry-"+ entry.id), $td, key; 
      $tr.innerHTML = ""; 
      for (key in entry) { 
       if (entry.hasOwnProperty(key)) { 
        $td = document.createElement("td"); 
        $td.appendChild(document.createTextNode(entry[key])); 
        $tr.appendChild($td); 
       } 
      } 
      $td = document.createElement("td"); 
      $td.innerHTML = '<a data-op="edit" data-id="'+ entry.id +'">Edit</a> | <a data-op="remove" data-id="'+ entry.id +'">Remove</a>'; 
      $tr.appendChild($td); 
     }, 
     tableRemove: function(entry) { 
      Animals.$table.removeChild(document.getElementById("entry-"+ entry.id)); 
     } 
    }; 


    Animals.init(); 

Answer 1

由於您目前的做法是讓你的代碼直接管理表HTML和動物實驗數據，這將需要你的代碼，不會排序的數據和表格的重寫。也就是說，您需要監聽列標題上的點擊事件，然後根據特定列對動物數據進行排序，然後完全重新繪製表格。重新繪製表格只需要循環顯示所有動物的tableRemove（）和tableAdd（）函數，儘管這可能會有點慢。每列的數據排序有點混亂，我在下面有一個解決方案。

更好的方法是讓RIA（富互聯網應用）框架爲您處理表格信息。許多這些框架（EXT-JS，YUI等）都提供了一個表格控件，可以大幅簡化您的編碼。你只要給它一個參考數據（以相關格式格式化），它就會爲你排序和顯示。

如果您仍然想自己創建HTML表格，並且對數據的排序更感興趣，那麼我會建議您使用客戶端數據庫解決方案，如SequelSphere。隨着SequelSphere，你可以創建一個表來管理你的動物實驗數據，如下：

db.catalog.createTable({ 
    tableName: "animals", 
    columns: ["id_entry", "animal_id", "animal_name", "animal_type", 
      "bday", "animal_sex", "mother_name", "farm_name", "money", 
      "weight", "purchase_partner"], 
    primaryKey: ["id_entry"] 
}); 

然後你可以插入/更新/刪除的行這樣的：

db.catalog.getTable("animals").insertRow(
    [ entry.id, entry.animal_id, entry.animal_name, entry.animal_type, 
    entry.bday, entry.animal_sex, entry.mother_name, entry.farm_name, 
    entry.money, entry.weight, entry.purchase_partner ] 
); 

最後，你可以得到你的數據

var sql = "SELECT id_entry, animal_id, animal_name, animal_type, " + 
      "  bday, animal_sex, mother_name, farm_name, money, " + 
      "  weight, purchase_partner " + 
      " FROM animals " + 
      " ORDER BY animal_sex "; // why did I choose this column? 
var sortedEntries = db.query(sql); 

哦，是的：SequelSphere還存儲在window.localStora數據以任何列用戶僅僅通過下面的select語句改變ORDER BY子句點擊排序ge，所以你不必寫那個。它也完全支持SQL和遊標，所以管理分頁也會更容易一些。

希望這會有所幫助！

約翰。