![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
初心者的な質問になるかもしれませんが、宜しくお願いします。
唐突ですが、こんなTable付きのHTMLがあります(ちょっと省略してます)。
<DIV>.....</DIV> ← (*)
<Table>
<TR>
<TD> ← (1)
<SCRIPT ........</SCRIPT>
<A HREF="">........</A>
<LI>
<DIV class ..... </DIV>
<DIV class ..... </DIV>
<DIV class ..... </DIV>
<LI>
</TD>
<TD> ← (2)
<LI>
<DIV class ..... </DIV>
<DIV class ..... </DIV>
<DIV class ..... </DIV>
<LI>
</TD>
<TD> ← (3)
<LI>
<DIV class ..... </DIV>
<DIV class ..... </DIV>
<DIV class ..... </DIV>
<LI>
</TD>
</TABLE>
(1)は複数の子要素があり、(2)と(3)はLI要素(ただし、その中に複数要素がある)です。
この(1)~(3)のTDの子要素部分だけを抽出し、(*)の
DIVタグの真下に移動させるようなjquery文を作りたいのですが、
http://d.hatena.ne.jp/replication/20120113/13263 …
等の記事を参考に、
var cells, tblcell;
// テーブルタグを探して、1番目のテーブルを取得する
var rows = $("table")[0].rows;
// 列を1つずつ取り出す
$.each(rows, function(i) {
cells = rows[i].cells;
// 行を1つずつ取り出す
$.each(cells, function() {
// tdタグの値を書き換える
tblcell = $(this).detach();
console.log(tblcell);
// tdタグのスタイルシートを書き換える
$('div').after(tblcell);
});
});
このやり方だとrowの性質上、DIVの下へTD付きでそのまま来てしまいます。
そうではなく、TD直下のHTMLだけをそのままDIVの直下へつなげるように放り込みたいのですが、
中々うまいやり方がみつかりません・・・
なにか、よい方法はございませんでしょうか?
No.2ベストアンサー
- 回答日時:
なんでもかんでも jQuery をもちださなくても。
script 要素も移動する必要がありますか?というかそこに必要なのか?
テキストノードは適当に何かの要素で囲んでね。
(*)の手前の要素には、id="piyo" を追加!
そのうち、insertAfter を使った回答が…
function i (e) {
this.parentNode.insertBefore (e, this);
}
function hoge () {
var c = document.querySelectorAll ('body > table:nth-of-type(1) td > *');
var b = document.querySelector ('#piyo').nextElementSibling;
Array.prototype.forEach.call (c, i, b);
}
hoge ();
No.1
- 回答日時:
そもそもHTML根本的におかしいし・・・
Another HTML Lint - Gateway( http://www.htmllint.net/html-lint/htmllint.html )
の右上DATAでチェックしてみましたか?
単純に、スタイルシートで書き直したら?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 【Javascript】ボタンクリックで2つのclassに対し、それぞれ別のclassを追加したい 1 2022/07/29 20:52
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- PHP アップロードファイルの数に応じてCSSを動的に変更したいのですが、方法がわかりません 3 2023/07/23 21:59
- HTML・CSS サルワカさんの吹き出しのスタイルシートについて。 https://saruwakakun.com/h 2 2022/10/28 22:55
- PHP 掲示板を作成しておりアップロードファイルとメッセージを並べたいので、アドバイスお願い致します 2 2023/07/17 21:01
- PHP アコーディオンPHPが上手くいかない 3 2022/07/15 16:29
- PHP ランキングを表示する際の画像の大きさを固定することは可能でしょうか? <?php if ( has_ 1 2022/07/21 14:55
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
マウスが重なったら画像の上に...
-
カレンダーに印を付けたい
-
写真の下に説明文
-
テーブルの背景色を複数変更する
-
html内>テーブル内に複数のjav...
-
javascriptでクリックするごと...
-
テーブルの行数を可変長にした...
-
画像クリックでテーブル内背景...
-
Javascriptでの開閉リストの質問
-
javascriptで<table>背景色の取得
-
Dreamweaverで音をボタンで出る...
-
document writeの中に親の値を...
-
JAVAで作るカレンダー 応用
-
画面表示とともに、テーブルの...
-
テーブルをクイックソートする...
-
JavaScript 保守性の高めたい 2
-
プルダウン 項目が多いので先頭...
-
onchangeイベントを強制的に発...
-
return trueとreturn falseの用...
-
value内に変数を入れたい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<JavaScript>tableタグを入力不...
-
テーブルの行数を可変長にした...
-
画面表示とともに、テーブルの...
-
selectのonChangeが動作しません
-
【jQuery】tableループ内のIDの...
-
javascriptで画像をテーブルに...
-
Tableの枠線(内・外)色を変更
-
テキストエリアに入力した改行...
-
クリックごとに文字色が交互に...
-
javascript でテーブル操作
-
JQueryでテーブルの行を追加し...
-
javascriptで<table>背景色の取得
-
idの振り直しについて
-
テーブルのセルのクリック時、...
-
<iframe>内にHTMLをランダム表...
-
javascriptでスロットマシン
-
プルダウンメニューを表の中に...
-
連動テーブルのクロスハイライト
-
簡単なJavaスロットマシーンに...
-
jquery にて、アラートダイアロ...
おすすめ情報