JQuery 삭제 줄 추가

10557 단어 JavaScripthtmljqueryXHTML
(1) jQuery 추가 동적 삭제
줄 에 따라 추가, 삭제, 삭제 후 동적 으로 뒤에서 보충 합 니 다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<title>demo about table</title>
<script>
	$(document).ready(function(){		
		$("#but").click(function(){
			var $table=$("#tab tr");
			var len=$table.length;
		//	alert("tr length :"+len);
		//	alert(" content :"+"<tr id="+(len+1)+"><td align=\'center\'>"+len+"</td><td align=\'center\'>jQuery"+len+"</td><td align=\'center\'><a href=\'#\' onclick=\'deltr("+(len+1)+")\'>  </a></td></tr>");
			
			$("#tab").append("<tr id="+(len+1)+"><td align=\'center\'>"+len+"</td><td align=\'center\'>jQuery"+len+"</td><td align=\'center\'><a href=\'#\' onclick=\'deltr("+(len+1)+")\'>  </a></td></tr>");			
		})	
	})
	
	function deltr(index)
	{
	alert(index);
	//	alert("tr[id=\'"+index+"\']");
		$table=$("#tab tr");
		if(index>$table.length)
			return;
		else
		{
			$("tr[id=\'"+index+"\']").remove();	
			//$("tr:gt('"+index+"')").each				
		//	for(var temp=index+1;temp<=$table.length;temp++)
		//	{
				//$("#tab").append("<tr id="+(temp-1)+"><td align=\'center\'>"+(temp-2)+"</td><td //align=\'center\'>jQuery"+(temp-2)+"</td><td align=\'center\'><a href=\'#\' onclick=\'deltr("+(temp-1)+")\'>  //</a></td></tr>");
		//		$("tr[id=\'"+temp+"\']").replaceWith("<tr id="+(temp-1)+"><td align=\'center\'>"+(temp-2)+"</td><td //align=\'center\'>jQuery"+(temp-2)+"</td><td align=\'center\'><a href=\'#\' onclick=\'deltr("+(temp-1)+")\'>  //</a></td></tr>");
		//	}	
		}	
	}

	
</script>
</head>

<body>
<br/>
<table id="tab" border="1" width="60%" align="center">
	<tr>
    	<td width="20%" align="center">  </td>
      	<td align="center">  </td>
        <td align="center">  </td>
  </tr>
</table>
<br/>
<div style="border:2px; border-color:#00CC00; margin-left:20%">
<input type="button" id="but" value="add"/>
</div>
</body>
</html>

(2) jQuery 말미 추가 삭제
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<title>demo about table</title>
<script>
// id test table           
function addtr(id){    
tr_id = $("#"+id+">tbody>tr:last").attr("id");  
alert(tr_id);  
tr_id++;    
//alert(tr_id);    
str = "<tr id = '"+tr_id+"'><td width='30%'>re1</td><td width='30%'>re2</td><td width='30%'>re3</td></tr>";    
$('#'+id).append(str);    
}    
//  id test table         
function deltr(id){    
tr_id = $("#"+id+">tbody>tr:last").attr("id");    
$('#'+tr_id).remove();    
}    

</script>
</head>

<body>
<br/>
<table border="1px #ooo" id="test" name="test" class="test" cellpadding="0" cellspacing="0" width="20%">   
<tr id="1"><td width="30%">1</td><td width="30%">2</td><td width="30%">3</td></tr>   
<tr id="2"><td width="30%">11</td><td width="30%">22</td><td width="30%">33</td></tr>   
</table>     
<input type="button" name="button" value="add" onclick="addtr('test');">   
<input type="button" name="button" value="del" onclick="deltr('test');">   

</div>
</body>
</html>

(3) javascript 동적 추가 삭제

<%@ page language="java" contentType="text/html; charset=GB18030"
    pageEncoding="GB18030"%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GB18030">
<title>Insert title here</title>

<script type="text/javascript">
function addMore()
{
	var td = document.getElementById("more");
	
	var br = document.createElement("br");
	var input = document.createElement("input");
	var button = document.createElement("input");
	
	input.type = "file";
	input.name = "file";
	
	button.type = "button";
	button.value = "Remove";
	
	button.onclick = function()
	{
		td.removeChild(br);
		td.removeChild(input);
		td.removeChild(button);
	}
	
	td.appendChild(br);
	td.appendChild(input);
	td.appendChild(button);
	
}
</script>
</head>
<body>
		<form action="upload" theme="simple" enctype="multipart/form-data">
			<table align="center" width="50%" border="1">
				<tr>
					<td>
						file
					</td>
					<td id="more">
						<input type = "file" name="file"/><input type="button" value="Add More.." onclick="addMore()">
					</td>
				</tr>
			</table>
		</form>
</body>
</html>

(4) jQuery 세 가지 동적 추가 삭제 방식

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.3.1.js"></script>
<title>demo about table</title>
<script>
jQuery(function($){
   //   
    $("#add1").click(function(){
        $("#table2>tbody").append('<tr><td>  1</td><td><button onclick="deltr(this)">  </button></td></tr>')
   });
});
//      ，    domready    
function deltr(delbtn){
    $(delbtn).parents("tr").remove();
};
jQuery(function($){
   //          
   //   ，          
   function deltr(){
        $(this).parents("tr").remove();
   };
   //               
    $("#table2 .del").click(deltr);
   //   
    $("#add2").click(function(){
        $('<tr><td>   2</td><td><button class="del">  </button></td></tr>')
           //              。
            .find(".del").click(deltr).end()
            .appendTo($("#table2>tbody"));
   });
});

jQuery(function($){
   //              
    $("#table2").click(function(e) {
       if (e.target.className=="del"){
            $(e.target).parents("tr").remove();
       };
   });
   //              
    $("#add3").click(function(){
        $("#table2>tbody").append('<tr><td>   3</td><td><button class="del">  </button></td></tr>')
   });
});

</script>
</head>

<body>
<br/>
<table id="table2">
    <tbody>
        <tr>
            <td>      </td>
            <td><buttonclass="del">  </button></td>
        </tr>
        <tr>
            <td>      </td>
            <td><buttonclass="del">  </button></td>
        </tr>
    </tbody>
</table>
<input type="button" name="add1" id="add1" value="  1"/>
<input type="button" name="add2" id="add2" value="  2"/>
<input type="button" name="add3" id="add3" value="  3"/>
</body>
</html>
intel dpdk api makefile 컴 파일 옵션 수정 및 gdb 디 버 깅
UEditor HTML을 데이터베이스에 저장하고 다시 표시

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage