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>
  










  infoboard   管理者用   
このエントリーをはてなブックマークに追加





フリーフォントWEBサービス
SQLの窓WEBサービス

SQLの窓フリーソフト

素材

一般WEBツールリンク

SQLの窓

フリーソフト

JSライブラリ