HTML DOM

  テーブルのデータ参照

最初のサンプルは、TH と TD を両方取得するコードです。
両方取得する為に、TR から childNodes でコレクションを取得しています。
しかし、その為に #text ノードが混じる為、取り出し部分で排除しています

二つ目のサンプルは、対象を TD だけにしている為、TR から getElementsByTagName でコレクション
を取得していますが、タグ名取得の為余計なノードはリストに含まれません。

   

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">
<SCRIPT language="javascript" type="text/javascript">

function Analyze() {

	var i,j,objNode,objNodeList,nLength,objResult;

	// 結果表示用 DIV
	objResult = document.getElementById( "result" );
	// 対象テーブル
	objNode = document.getElementById( "target" );

	// 対象テーブル内の TR ノード
	objNodeList = objNode.getElementsByTagName( "TR" );

	// 行数
	nLength = objNodeList.length;

	var objTR,objTDList,objTD,objDATAList,objData,bFlg;
	var resultString = "";

	// 全ての行
	for( i = 0; i < nLength; i++ ) {
		// カレントノード
		objTR = objNodeList.item( i );
		// セルリスト
		objTDList = objTR.childNodes;

		// 全てのセル
		bFlg = false;
		for( j = 0; j < objTDList.length; j++ ) {
			objTD = objTDList.item(j);
			// タグノードのみを取得
			if ( objTD.nodeName != "#text" ) {
				if ( bFlg ) {
					resultString += " : ";
				}
				resultString += objTD.firstChild.nodeValue;
				bFlg = true;
			}
		}
		resultString += "<br>";

	}

	objResult.innerHTML = resultString;

}

</SCRIPT>
</HEAD>
<BODY>

<INPUT type=button value="解析" onClick='Analyze()'>

<TABLE id="target">
<TR>
	<TH>コード</TH>
	<TH>名称</TH>
	<TH>数値</TH>
</TR>
<TR>
	<TD>0001</TD>
	<TD>名称1</TD>
	<TD>100</TD>
</TR>
<TR>
	<TD>0002</TD>
	<TD>名称2</TD>
	<TD>200</TD>
</TR>
<TR>
	<TD>0003</TD>
	<TD>名称3</TD>
	<TD>300</TD>
</TR>
</TABLE>

<HR>

<DIV id="result">
</DIV>

</BODY>
</HTML>
  


以下が、getElementsByTagName を使用したものです

   

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">
<SCRIPT language="javascript" type="text/javascript">

function Analyze() {

	var i,j,objNode,objNodeList,nLength,objResult;

	// 結果表示用 DIV
	objResult = document.getElementById( "result" );
	// 対象テーブル
	objNode = document.getElementById( "target" );

	// 対象テーブル内の TR ノード
	objNodeList = objNode.getElementsByTagName( "TR" );

	// 行数
	nLength = objNodeList.length;

	var objTR,objTDList,objTD,objDATAList,objData;
	var resultString = "";

	// 全ての行
	for( i = 0; i < nLength; i++ ) {
		// カレントノード
		objTR = objNodeList.item( i );
		// セルリスト( TH が必要無い場合 )
		objTDList = objTR.getElementsByTagName("TD");

		// 全てのセル
		for( j = 0; j < objTDList.length; j++ ) {
			objTD = objTDList.item(j);
			if ( j != 0 ) {
				resultString += " : ";
			}
			resultString += objTD.firstChild.nodeValue;
		}
		resultString += "<br>";

	}

	objResult.innerHTML = resultString;

}

</SCRIPT>
</HEAD>
<BODY>

<INPUT type=button value="解析" onClick='Analyze()'>

<TABLE id="target">
<TR>
	<TH>コード</TH>
	<TH>名称</TH>
	<TH>数値</TH>
</TR>
<TR>
	<TD>0001</TD>
	<TD>名称1</TD>
	<TD>100</TD>
</TR>
<TR>
	<TD>0002</TD>
	<TD>名称2</TD>
	<TD>200</TD>
</TR>
<TR>
	<TD>0003</TD>
	<TD>名称3</TD>
	<TD>300</TD>
</TR>
</TABLE>

<HR>

<DIV id="result">
</DIV>

</BODY>
</HTML>
  


参照できるという事は、値を変更できます。
以下は、数値部分に +1 するサンプルです。

   

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">
<SCRIPT language="javascript" type="text/javascript">

function Analyze() {

	var i,j,objNode,objNodeList,nLength,objResult;

	// 結果表示用 DIV
	objResult = document.getElementById( "result" );
	// 対象テーブル
	objNode = document.getElementById( "target" );

	// 対象テーブル内の TR ノード
	objNodeList = objNode.getElementsByTagName( "TR" );

	// 行数
	nLength = objNodeList.length;

	var objTR,objTDList,objTD,objDATAList,objData;
	var resultString = "";

	// 全ての行
	for( i = 0; i < nLength; i++ ) {
		// カレントノード
		objTR = objNodeList.item( i );
		// セルリスト( TH が必要無い場合 )
		objTDList = objTR.getElementsByTagName("TD");

		// 全てのセル
		for( j = 0; j < objTDList.length; j++ ) {
			objTD = objTDList.item(j);
			if ( j != 0 ) {
				resultString += " : ";
			}
			resultString += objTD.firstChild.nodeValue;
			if ( j == 2 ) {
				objTD.firstChild.nodeValue = 
				eval( objTD.firstChild.nodeValue ) + 1;
			}
		}
		resultString += "<br>";

	}

	objResult.innerHTML = resultString;

}

</SCRIPT>
</HEAD>
<BODY>

<INPUT type=button value="解析" onClick='Analyze()'>

<TABLE id="target">
<TR>
	<TH>コード</TH>
	<TH>名称</TH>
	<TH>数値</TH>
</TR>
<TR>
	<TD>0001</TD>
	<TD>名称1</TD>
	<TD>100</TD>
</TR>
<TR>
	<TD>0002</TD>
	<TD>名称2</TD>
	<TD>200</TD>
</TR>
<TR>
	<TD>0003</TD>
	<TD>名称3</TD>
	<TD>300</TD>
</TR>
</TABLE>

<HR>

<DIV id="result">
</DIV>

</BODY>
</HTML>
  


  行追加

行追加をする場合、TR の子要素である TD が多い場合、全てを新規作成するのは面倒なので既存行の
クローンを作成して追加する方法が良いと思います。
( ※ コンボボックスの処理を参照 : cloneNode )

   

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=Shift_JIS">
<SCRIPT language="javascript" type="text/javascript">

function AddRow() {

	var i,j,objNode,objNodeList,nLength,objResult;

	// 結果表示用 DIV
	objResult = document.getElementById( "result" );
	// 対象テーブル
	objNode = document.getElementById( "target" );

	// 対象テーブル内の TR ノード
	objNodeList = objNode.getElementsByTagName( "TR" );

	// 行数
	nLength = objNodeList.length;

	// 一行目のクローンを作成 ( TH があるので、最初の行は 1 )
	var cloneNode = objNodeList.item(1).cloneNode( true );
	// クローンノードの設定
	var nodeTDList = cloneNode.getElementsByTagName( "TD" );
	nodeTDList.item( 0 ).firstChild.nodeValue = "[0001]";
	nodeTDList.item( 1 ).style.cssText = "font-weight: bold";
	// 個別設定
//	nodeTDList.item( 1 ).style.fontWeight = "bold";
	nodeTDList.item( 2 ).setAttribute("align", "right");

	// ２行目の前に追加
	// insertBefore を実行する為に、TR ノードの親ノードを取得
	var parentNode = objNodeList.item(1).parentNode;
	parentNode.insertBefore( cloneNode, objNodeList[2] );

	alert( parentNode.nodeName );
	// 以下でも同様
//	var parentNode = objNode.getElementsByTagName( "TBODY" )[0];
//	parentNode.insertBefore( cloneNode, objNodeList[2] );

}

</SCRIPT>
</HEAD>
<BODY>

<INPUT type=button value="追加" onClick='AddRow()'>

<TABLE id="target">
<TR>
	<TH>コード</TH>
	<TH>名称</TH>
	<TH>数値</TH>
</TR>
<TR>
	<TD>0001</TD>
	<TD>名称1</TD>
	<TD>100</TD>
</TR>
<TR>
	<TD>0002</TD>
	<TD>名称2</TD>
	<TD>200</TD>
</TR>
<TR>
	<TD>0003</TD>
	<TD>名称3</TD>
	<TD>300</TD>
</TR>
</TABLE>

</BODY>
</HTML>
  


yahoo  google  MSDN  MSDN(us)  WinFAQ  Win Howto  tohoho  ie_DHTML  vector  wdic  辞書  天気 


[useXML]
Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
24/04/20 23:21:51
InfoBoard Version 1.00 : Language=Perl

1 BatchHelper COMprog CommonSpec Cprog CprogBase CprogSAMPLE CprogSTD CprogSTD2 CprogWinsock Cygwin GameScript HTML HTMLcss InstallShield InstallShieldFunc JScript JScriptSAMPLE Jsfuncs LLINK OldProg OracleGold OracleSilver PRO PRObrowser PROc PROconePOINT PROcontrol PROftpclient PROjscript PROmailer PROperl PROperlCHAT PROphp PROphpLesson PROphpLesson2 PROphpLesson3 PROphpfunction PROphpfunctionArray PROphpfunctionMisc PROphpfunctionString PROsql PROvb PROvbFunction PROvbString PROvbdbmtn PROvbonepoint PROwebapp PROwin1POINT PROwinSYSTEM PROwinYOROZU PROwindows ProjectBoard RealPHP ScriptAPP ScriptMaster VBRealtime Vsfuncs a1root access accreq adsi ajax amazon argus asp aspSample aspVarious aspdotnet aw2kinst cappvariety centura ckeyword classStyle cmaterial cmbin cmdbapp cmenum cmlang cmlistbox cmstd cmstdseed cmtxt cs daz3d db dbCommon dbaccess dnettool dos download flex2 flex3 flex4 framemtn framereq freeWorld freesoft gimp ginpro giodownload google hdml home hta htmlDom ie9svg install java javaSwing javascript jetsql jquery jsp jspTest jspVarious lightbox listasp listmsapi listmsie listmsiis listmsnt listmspatch listmsscript listmsvb listmsvc memo ms msde mysql netbeans oraPlsql oracle oracleWiper oraclehelper orafunc other panoramio pear perl personal pgdojo pgdojo_cal pgdojo_holiday pgdojo_idx pgdojo_ref pgdojo_req php phpVarious phpguide plsql postgres ps r205 realC realwebapp regex rgaki ruby rule sboard sc scprint scquest sdb sdbquest seesaa setup sh_Imagick sh_canvas sh_dotnet sh_google sh_tool sh_web shadowbox shgm shjquery shvbs shweb sjscript skadai skywalker smalltech sperl sqlq src systemdoc tcpip tegaki three toolbox twitter typeface usb useXML vb vbdb vbsfunc vbsguide vbsrc vpc wcsignup webanymind webappgen webclass webparts webtool webwsh win8 winofsql wmi work wp youtube