<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="./jquery-1.7.1.js"></script>
<script type="text/javascript" src="./jquery.tablednd.js"></script>
<script type="text/javascript" src="./jqueryTableDnDArticle.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript">
$(document).ready(function() {
$('#target').click(function() {
var rows = jQuery("#table-1 tr");
var index = rows.length+1;
jQuery("#table-1").append(
"<tr id='"+index+"'>"
+"<td>"
+" <a href='javascript:deleteRow("+index+");'>"+index+"</a>"
+"</td>"
+"<td>Mario</td>"
+"</tr>"
);
$("#table-1").tableDnD();
});
$("#table-1").tableDnD();
//<span class="comment">// Initialise the table</span>
//$("#table-1").tableDnD();
// alert("test");
});
</script>
<script type="text/javascript">
function deleteRow(index)
{
var row = jQuery("#"+index);
row.fadeOut("slow", function()
{
row.remove();
});
}
</script>
</head>
<body>
<button id="target" >증가</button>
<table id="table-1">
<tr id="1"><td>1</td><td>One</td><td>some text</td></tr>
<tr id="2"><td>2</td><td>Two</td><td>some text</td></tr>
<tr id="3"><td>3</td><td>Three</td><td>some text</td></tr>
<tr id="4"><td>4</td><td>Four</td><td>some text</td></tr>
<tr id="5"><td>5</td><td>Five</td><td>some text</td></tr>
<tr id="6"><td>6</td><td>Six</td><td>some text</td></tr>
</table>
</body>
</html>
'Web > jQuery' 카테고리의 다른 글
| 엑셀 (0) | 2013.06.22 |
|---|---|
| each() (0) | 2013.06.22 |
| html() 확장법 (0) | 2013.06.22 |
| 부트스트랩 (0) | 2013.06.14 |
| [jQuery] 유용한 플러그인 모음 (0) | 2013.05.27 |