星期日, 7月 18, 2010

(加強版) jquery 簡單新增移除 table rows

之前有寫一個簡單的範例 jquery 簡單新增移除table rows ,因為有人留言說如果可以指定行數來刪除 row 那就更有實用性了,所以我就寫了一個改良版的,這個範例結合了後端用 ajax 抓取 server 端的時間,還有用 jquery 1.3 以後才有的 .live() 的函式來處理,程式更短更簡單,直接看code吧!

View

<style type="text/css">
table
{
border: solid 1px red;
border-collapse: collapse;
}
table td
{
border: solid 1px red;
width: 150px;
}
</style>

<table width="450px" cellpadding="0" cellspacing="0">
<thead>
<tr>
<td>新增時間</td>
<td>內容</td>
<td>##</td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>r</td>
<td><a href="javascript:;">刪除row</a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>
<%= Ajax.ActionLink("新增一筆", "GetNow",
new AjaxOptions() {
OnSuccess="CreateRow",
HttpMethod="POST",
}) %>
</td>
</tr>
</tfoot>
</table>
<script type="text/javascript">
function CreateRow(data)
{
var time = data.get_data();
var newRow = $('tbody tr:first').clone();
newRow.find('td:first').append(time);
$('tbody').append(newRow);
}
function DeleteRow(elem)
{
var row = $(elem).parents('tr');
var index = $('tr').index(row);
if (index != 1)
row.hide();
}
$(document).ready(function ()
{
$('tbody a').live('click', function ()
{
DeleteRow(this);
});
});
</script>

controller

public class TableController : Controller
{
//
// GET: /Table/

public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult GetNow()
{
return Content(DateTime.Now.ToString("yyyy/MM/dd HH:mm:ss"));
}
}

有圖有真相

image

這樣就實用性就很高啦..讚..
參考:
http://msdn.microsoft.com/en-us/library/dd394709.aspx
http://api.jquery.com/live/

1 則留言:

Oaww 提到...

不過建議不要用live吧,把event綁在table再處理一下會比較好 :Q