行の追加は、ヘッダー行の次に追加されるようにして、削除は各行に削除リンクが用意する感じです。
以下のような感じです。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML lang="ja">
<head>
<META http-equiv="Content-Script-Type" content="text/javascript">
<META http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
<title>test</title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(".addadd").click(function(){
var row_data = "<tr><td>ccc</td><td>" + Math.floor( Math.random() * 100 )
row_data = row_data + '</td><td><a href="#" class="deldel">削除</a></td></tr>'
$("#tabtab tr:first").after(row_data);
return false;
});
$(".deldel").live('click',function(event) {
$(this).parent().parent().remove();
return false;
});
});
</script>
</head>
<body>
<a href="#" class="addadd">行を追加</a>
<table border=1 id="tabtab">
<tr><th>d1</th><th>d2</th><th></th></tr>
<tr><td>aaa</td><td>bbb</td><td><a href="#" class="deldel">削除</a></td></tr>
<tr><td>xxx</td><td>yyy</td><td><a href="#" class="deldel">削除</a></td></tr>
</table>
</body>
</html>
最近jqueryに関する本も増えてきましたね。
0 件のコメント:
コメントを投稿