如何將可編輯的表格使用JavaScript或jQuery的

Question

我有一個可編輯的表格中，我們可以添加，刪除和編輯行進行排序。我怎樣才能通過動態存儲它們沒有數據庫只是靜態的緣故

Answer 1

你可以嘗試像https://datatables.net/的一個插件，能有這樣多的特點對其進行排序。然而，你總是可以嘗試一些像這樣的代碼：

var tbl = $("table#yourtblID"); 
var rows = $("tr", tbl); 
rows.sort(conditionFunction); 
$("tr", tbl).remove(); 

爲了使用上面的代碼，你可以根據需要創建一個conditionFunction。比方說，你想排序基於列名爲ID與具有類TID

function conditionFunction(a,b){ 
    return $("td", a).text()-$("td", b).text(); 
} 

爲了更多地瞭解這些情況的功能是指https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Answer 2

有所有的TD標籤的tablesorter jQuery插件可用於排序表格。

演示：https://jsfiddle.net/Prakash_Thete/q8sh28dh/。

這裏是相同

HTML代碼示例：

<table id="myTable" class="tablesorter"> 
    <thead> 
    <tr> 
     <th>Last Name</th> 
     <th>First Name</th> 
     <th>Email</th> 
     <th>Due</th> 
     <th>Web Site</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td>Smith</td> 
     <td>John</td> 
     <td>jsmith@gmail.com</td> 
     <td>$50.00</td> 
     <td>http://www.jsmith.com</td> 
    </tr> 
    <tr> 
     <td>Bach</td> 
     <td>Frank</td> 
     <td>fbach@yahoo.com</td> 
     <td>$50.00</td> 
     <td>http://www.frank.com</td> 
    </tr> 
    <tr> 
     <td>Doe</td> 
     <td>Jason</td> 
     <td>jdoe@hotmail.com</td> 
     <td>$100.00</td> 
     <td>http://www.jdoe.com</td> 
    </tr> 
    <tr> 
     <td>Conway</td> 
     <td>Tim</td> 
     <td>tconway@earthlink.net</td> 
     <td>$50.00</td> 
     <td>http://www.timconway.com</td> 
    </tr> 
    </tbody> 
</table> 

JS：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.26.5/js/jquery.tablesorter.js"></script> 

$(document).ready(function() { 
    $("#myTable").tablesorter(); 
}); 

有關插件的信息，請訪問http://tablesorter.com/docs/