星期三, 7月 02, 2008

jquery 簡單新增移除table rows

原理就是用組裝的方式去拼湊很簡單..直接看原始碼..

.css

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

.aspx

<table width="450px" cellpadding="0" cellspacing="0">
<thead>
<tr>
<td>#</td>
<td>#</td>
<td>#</td>
</tr>
<thead>
<tbody>
<tr>
<td>r</td>
<td>r</td>
<td>r</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>
<input id="Button1" type="button" value="新增row" onclick="insertRows();" />
<input id="Button2" type="button" value="刪除row" onclick="deleteRow();" />
</td>
</tr>
</tfoot>
</table>

.js

function insertRows()
{
var ohtml = $('tbody:eq(0)').html();
var row1 = $('tbody tr:eq(0)').html();
$('tbody').html(ohtml + '<tr>' + row1 + '</tr>');
}
function deleteRow()
{
var newHtml = '';
var RowsNumber = $('tbody tr').length;
var res = $('tbody tr').each(function(i){
if(i != RowsNumber-1)
{
newHtml += '<tr>' + $(this).html() + '</tr>';
}
});
var h = $('tbody:eq(0)').html(newHtml);
}

yhu

有圖有真相..Cool..完成..Sick..

參考:
http://docs.jquery.com
http://htmlhelp.com/reference/html40/tables/tbody.html


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

2 則留言:

匿名 提到...

如果有得指定row delete效果更佳!

匿名 提到...

如果有得指定刪除第幾行更佳