jquery 實驗 101

純粹筆記的jquery

功能如下

1.從遠端拿到表格的資料 然後放上表格
jquery ajax
2.點選radio button 改變span的行為
jquery add remove span
jquery .text for span
3.刪除tr資料
jquery remove table tr


第一段 localhost的php

$ary=array();
$ary[0]['id']=1;
$ary[0]['col1']='apple';
$ary[0]['col2']=100;
$ary[0]['col3']=50;
$ary[0]['msg']='apple is good';
$ary[1]['id']=2;
$ary[1]['col1']='banana';
$ary[1]['col2']=80;
$ary[1]['col3']=20;
$ary[1]['msg']='banana is descript';
$ary[2]['id']=3;
$ary[2]['col1']='cherry';
$ary[2]['col2']=70;
$ary[2]['col3']=60;
$ary[2]['msg']='cherry is blah blah blah';

$json = json_encode($ary);
header("Access-Control-Allow-Origin: *");
header('Content-type: application/json');
echo $json;

這裡有用到跨網域存取,在新版的chrome如果你是讀取其他網域的api,那對方在header上要設定

Access-Control-Allow-Origin

設定完後

檔案存為tr.php

 

寫各簡單的page

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html" /> 

	<title>jquery test</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
<script type="text/javascript">
<!--
$( function() {

	var path = 'http://yourdomain.com/tr.php';
 	var trStr = '';
	$.ajax({
	 	url:path,
	 	success: function(json){
	 		  $.each(json,function(i,item){
	 		  	trStr = '<tr id='+item.id+'>';
	 		  	trStr += '<td><input type="button" class="btnX" name="x" value="x" onclick=removetr('+item.id+') />'+item.col1+'</td>';
	 		  	trStr += '<td>'+item.col2+'</td>';
	 		  	trStr += '<td>'+item.col3+'</td>';
	 		  	trStr += '<td>'+item.msg+'</td>'; 
	 		  	$('#tb1 tbody ').after(trStr);
	 		  	trStr = ''; 
	 		  });
	 		  
	 	}
	});
	$('input[type=radio][name=rad]').change(function() {
			var tv = this.value; 
	        switch(tv)
	        {
	        	case "1":
	        		removespan(1);
	        		addspan(1,'case 1');
	        		twi(1);
	        		 
	        	break;

	        	case "2":
	        		removespan(2);
	        		addspan(2,'case 2');
	        		twi(2);
	        		 
	        	break;

	        	case "3":
	        		removespan(3);
	        		addspan(3,'case 3');
	        		twi(1);
	        		 
	        	break; 
	        	
	        }
	    });	 



});

 
function removespan(trid){
		 
	   $('table#tb1 tr#'+trid+' span').remove();
}
function addspan(trid,msg){
	 $('table#tb1 tr#'+trid).append('<span>'+msg+'</span>');
}
function twi(trid)
{
	if (trid=='1'){
		$('#moon').text("");
		$('#sun').text("");
	}
	if (trid=='2'){
		$('#moon').text("moon");
		$('#sun').text("sun");
	}
	if (trid=='3'){
		$('#moon').text("lunar eclipse");
		$('#sun').text("sun eclipse");
	}	
} 
	 
function removetr(trid)
{
	 $('table#tb1 tr#'+trid ).remove();
}  

-->
</script>
<table name="jk" id="tb1">
	<thead>
		<td>hihihi</td>
	</thead>
	<tbody>
	</tbody>
	 

</table>
<hr>
<form name="ra">
<input type="radio" name="rad" value="1" checked >x1
<input type="radio" name="rad" value="2">x2
<input type="radio" name="rad" value="3">x3
<span id="moon" >moon</span>
<span id="sun" >sun</span>
</form>
</body>
</html>

這裡的

	
$.ajax({
	 	url:path,
	 	success: function(json){
	 		  $.each(json,function(i,item){
	 		  	trStr = '';
	 		  	trStr += ''+item.col1+'

‘; trStr += ”+item.col2+”; trStr += ”+item.col3+”; trStr += ”+item.msg+”; $(‘#tb1 tbody ‘).after(trStr); trStr = ”; }); } });È

是從tr.php讀取資料,因為只有讀取,所以沒有設定method,讀完後組合成html字串再使用after放入tbody的後面

這樣表格就組合出來了

 

這一段

$('input[type=radio][name=rad]').change(function() {
var tv = this.value; 
switch(tv)
{
case "1":
removespan(1);
addspan(1,'case 1');
twi(1);

break;

case "2":
removespan(2);
addspan(2,'case 2');
twi(2);

break;

case "3":
removespan(3);
addspan(3,'case 3');
twi(1);

break; 

}
});

是用來讀取radio button的寫法,radio使用的method是change,所以事件上放在change內

而對於span的改寫 有以下幾種方式 第一個是表格內的span,沒有id,第二個第三個span是有id的

$('table#tb1 tr#'+trid).append('<span>'+msg+'</span>');

$('#moon').text("");

$('#moon').text("lunar eclipse"); 

大致上就是這樣

發佈留言