【JavaScript / HTML】自作するのがしんどいので質問です。


<td>hoge</td>
<td>はてな</td>
<td>てきとう</td>
<td>いろいろ</td>
というようなテキストブロックがあり、任意のブロック数毎に、</tr><tr>を挟み込みたいと思っています。
※新着ブロックを先頭に入れるので、<TR>を自動で表示させたい

3ブロック毎に</tr><tr>を表示する場合のサンプルをお願いします。IE,firefox にて稼動するジャストなご回答をいただいた場合、600point+いるかにて御礼させていただきます。

回答の条件
  • 1人2回まで
  • 登録:2008/11/20 12:11:38
  • 終了:2008/11/20 19:01:50

ベストアンサー

id:Mars No.1

Mars回答回数203ベストアンサー獲得回数202008/11/20 16:33:09

ポイント600pt

ちょっと細かい部分がわからないので、

実際のページへの応用が利くかわかりませんが、一応サンプルコードです。

<html>
<head>
<title>サンプル</title>
<style type="text/css">
td{border:solid 1px black}
</style>
<script type="text/javascript">
function sample(){
	var tbl=document.getElementsByTagName('table')[0];//対象のテーブル取得
	var C=3;//1行のセル数

	var tds = tbl.getElementsByTagName('td');
	var newTBODY = document.createElement('tbody');
	var tdc=0;
	var newTR;
	for(var i=0;tds[i];i++){
		if(tdc++==0) newTR=document.createElement('tr');
		newTR.appendChild(tds[i].cloneNode(true));
		if(tdc>=C) {
			newTBODY.appendChild(newTR);
			tdc=0;
		}
	}
	while(tdc) {
		newTR.insertCell(-1);
		if(++tdc>=C) {
			newTBODY.appendChild(newTR);
			break;
		}
	}
	tbl.replaceChild(newTBODY,tbl.tBodies[0]);
}
</script>
</head>
<body>

<table>
<td>hoge</td>
<td>はてな</td>
<td>てきとう</td>
<td>いろいろ</td>
<td>hoge</td>
<td>はてな</td>
<td>てきとう</td>
<td>いろいろ</td>
</table>

<input type="button" onclick="sample()" value="テーブル変換">
</body>
</html>
id:naleringar

ありがとうございます。色々不足のある質問でお手数おかけします。テキストブロック=TDなので、概念は◎です。あと1点だけお願いがあります。

「ボタンを押したらソースの該当部分にTRタグを吐く」 または 「ファイルが呼び出された時に自動的に動く」のどちらかになればとてもありがたいです。

どうぞよろしくお願い申し上げます。

2008/11/20 17:00:52
  • id:Mars
    回答投稿後、質問を読み返して…
    テキストブロック=<textare> の事だったでしょうか?
    だとしたら全然的外れな回答ですので開封不要です。
  • id:Mars
    #1へのレスを読んで。
    やっぱりわからない部分があります。
    該当部分 ってどうやって判断すればいいんでしょうか?

    元のHTMLと期待するJavascript実行後のHTML を教えてもらうとわかりやすいかも。
  • id:naleringar
    「ファイルが呼び出された時に自動的に動く」の場合、アクティブスクリプトを制限しているブラウザ設定だとひっかかる可能性もありますよね…
    TDをずらずら並べていった後、最後に任意の数でTRされたテキストファイルがとれれば大変助かるのです。
  • id:Mars
    まだよくわかってない…
    結果のHTMLソースが欲しいという事でしょうか??

    スクリプトの最期に以下を追加。
    var result=tbl.tBodies[0].innerHTML;
    result=result.replace(/<\/tr>/gi,'<\/tr>\n');
    document.getElementById('result').value = result;


    HTML部分に以下を追加。
    <p><textarea id="result" rows="20" cols="80"></textarea></p>


    これで、ボタンを押すとテーブルの整形を行い、
    textarea内に結果<tr>~</tr>を吐き出します。
  • id:naleringar
    >|
    <table>
    <tr>

    <td>hoge</td>
    <td>はてな</td>
    <td>てきとう</td></tr><tr>
    <td>いろいろ</td>
    <td>hoge</td>
    <td>はてな</td></tr><tr>
    <td>てきとう</td>
    <td>いろいろ</td>

    </tr>
    </table>
    |<
    記法あってるかな…

    該当部分:変数C=3の場合、3つめの/tdの後にTRが出てくることはかのうでしょうか
  • id:naleringar
    すみません、コメントに時差がありますね。
    はい、ソースがとれれば大丈夫です。後ほど試して見ます。
  • id:naleringar
    テストしてみた結果、result = result.toLowerCase(); だけ足してそのまま使えそうです!
    ポイントといるかをつけさせていただきますね!色々ありがとうございました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません