2014年12月27日


JavaScript : ページ内のテーブルのボーダー(枠線)を設定する

getElementsByTagName は全てのノードで使用できるので、順番に子孫を取得する事ができます。

<script type="text/javascript">

function scriptTest(evt) {

	// TABLE 要素のコレクション
	var obj = document.getElementsByTagName("TABLE");
	var objcol = null;

	// TABLE 一覧
	for( var i = 0; i < obj.length; i++ ) {

		// テーブル外側の枠線
		obj[i].style.borderStyle = 'solid';
		obj[i].style.borderColor = '#411DB8';
		obj[i].style.borderWidth = '1px';

		// テーブル内の TD の一覧
		objcol = obj[i].getElementsByTagName("TD");
		for( var j = 0; j < objcol.length; j++ ) {
			// テーブル内の TD の枠線
			objcol[j].style.borderStyle = 'solid';
			objcol[j].style.borderColor = '#ffa500';
			objcol[j].style.borderWidth = '1px';
		}

		// テーブル内の TH の一覧
		objcol = obj[i].getElementsByTagName("TH");
		for( var j = 0; j < objcol.length; j++ ) {
			// テーブル内の TH の枠線
			objcol[j].style.borderStyle = 'solid';
			objcol[j].style.borderColor = '#1C8A23';
			objcol[j].style.borderWidth = '1px';
		}
	}

}
</script>
<input type="button" value="実行" onclick='scriptTest(event);'>



posted by at 00:14 | Comment(0) | JavaScript | このブログの読者になる | 更新情報をチェックする


この記事へのコメント
コメントを書く
お名前:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。