jquery学習ノート実戦2編集可能な表

1.まず、コードを見てみましょう.

1//      Javascript                
$(function(){
	//                
	$("tbody tr:even").css("background-color","#E3E9D8");
	
	//              
	var numTd=$("tbody td:even");
	//              
	numTd.click(function(){
		//         td,this        click   td
		var tdObj=$(this);
		if(tdObj.children("input").length>0){
			//  td  input,   click  
			return false;
		}
		var text=tdObj.html();
		//  td    
		tdObj.html("");

		//       
		//        
		//            16px
		//        td     
		//         
		//     td          
		//       td 
		var inputObj=$("<input type='text'>").css("border-width","0")
				.css("font-size","16px")
				.width(tdObj.width())
				.css("background-color",tdObj.css("background-color"))
				.val(text)
				.appendTo(tdObj);
		//            
		//inputObj.get(0).select();
		inputObj.trigger("focus").trigger("select");
		

		//         esc     
		inputObj.keyup(function(event){
			//          
			var keycode=event.which;
			//       
			if(keycode==13){
				//           
				var inputtext=$(this).val();
				// td             
				tdObj.html(inputtext);
			}
			//  ESC   
			if(keycode==27){
				// td       text
				tdObj.html(text);
			}
		});
	});
});

 2. コードの概要
     (1)

<table>
   <thead>
		<tr>
			<th colspan="2">            </th>
		</tr>
   </thead>
   <tbody>
		<tr>
			<th>  </th>
			<th>  </th>
		</tr>
   </tbody>
</table>

  
tableにはtheadとtbodyを含めることができます
ヘッダーの内容はtheadとtbdoyのthラベルに置くことができる.
 
     (2)
 

table{
	border:1px solid black;
	/*              */
	border-collapse:collapse;
	width:400px;
}

border-collapse:collapseという方法で、表のセルの枠線をマージできます.
(3)thに背景色がある場合、このthが属するtrで定義された背景色は無効となる
(4)css()メソッドは、取得ノードのcss属性を設定ために用いることができ、パラメータ名はcssの属性名である.
(5)jqueryのオブジェクトの内容はセレクタ対応のDOMノードを含む、配列形式で保存する.
(6)get()メソッドは、jqueryオブジェクトに含まれるdomノードを取得することができる
(7)$()メソッドのパラメータがDOMオブジェクトである場合,このメソッドはDOMオブジェクトをjqueryオブジェクトに変換することに相当する.
(8)children()メソッドは、あるノードのサブノードを得ることができ、サブノードの内容を制限するためにパラメータを指定することができる.
(9)セレクタが返すjqueryオブジェクトに複数のDOMノードが含まれている場合、このオブジェクトにclickのようなイベントが登録されている場合、
すべてのDOMノードがイベントに使用する.
(10)html()メソッドは、ノードのhtmlコンテンツを設定または取得することができる.
 

if(keycode==13){
	//           
	var inputtext=$(this).val();
	// td             
	tdObj.html(inputtext);
}

 
 

var text=tdObj.html();//     html  
//  td    
tdObj.html("");

 
(11)val()メソッドは、ノードのvalue値を設定または取得することができる
(12)$()メソッドのパラメータが正しいhtmlテキストである場合、DOMノードを作成し、jqueryオブジェクトにパッケージすることができる.
 

var inputObj=$("<input type='text'>")

(13)widthメソッドは、あるノードの幅を設定または取得することができる.
 

var inputObj=$("<input type='text'>").css("border-width","0")
		.css("font-size","16px")
		.width(tdObj.width())

 
(14)appendToメソッドは,あるノードを別のノードのすべてのサブノードの後に追加することができる.
(15)イベントの伝達を阻止し、現在のノードのイベントをfalseに戻す
 

if(tdObj.children("input").length>0){
	//  td  input,   click  
	return false;
}

(16)safariブラウザはfocusテキストボックスからselectでテキスト内容を選択する必要があります.他のブラウザは直接selectでテキストを選択できます
(17)trigger()メソッドはjavascriptのイベントメソッドをトリガすることができる
 

//            
//inputObj.get(0).select();
inputObj.trigger("focus").trigger("select");

 
(18)jqueryにおけるイベントメソッドのパラメータfunctionにeventのパラメータを定義することができる.jqueryはブラウザのeventの違いをマスクします.
私たちに可能なeventオブジェクトを渡します.
(19)jqueryのeventオブジェクトにwhich属性があり,キーボードキーの値を得ることができる.
(20)keycode=13リターンキーkeycode=27 ESCキー