現在用いてデータベースから引っ張ってきたデータをテーブルに表示させるプログラムを書いています。
OS:MacOSX,開発環境：ローカル

データを反映させるまではうまくいったのですが、いざ出力してみると画像の通りテーブルが乱れてしまっています。うまく項目を合わせてテーブルを表示させたいですが、原因がわかりません。

原因がわかればご教示いただけますととても嬉しいです。

以下は画像のブラウザを表示しているphpです。なお、includeしているajax.index_data.phpはデータベース接続のためのファイルです。

ajax.indexmain.php

<?php
include 'ajax.index_data.php';
ini_set('display_errors',1);
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
</head>
<body>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="ajax.index.js"></script>
    <table border="1" id="tbl">
    <tr>
        <td>都道府県</td>
        <td>市区町村</td>
        <td>区分</td>
        <td>合計部数</td>
        <td>同梱</td>
        <td>クライアント</td>
    </tr>
    </table>
 </body>
</html>

以下はjsのプログラムです。前述のajax.indexmain.php内で読み込んでおり、ajax.index.php（後述）内のid=minの部分をテーブルの一番下に表示させるようにjsでプログラムしています。

ajax.index.js

$(function(){
      $('#tbl').append($('<div>').load('ajax.index.php #min'));
         });

以下はjs内で読み込んでいるajax.index.phpです。ここの<tr>がうまくテーブルに表示できません。

ajax.index.php

<?php
include('ajax.index_data.php');
?>
       <!DOCTYPE html>
      <html lang="ja">
      <head>
     <meta charset="UTF-8">
     </head>
     <body>
     <table>
    <tr id="min">
                <td>東京都</td>
                <td>港区</td>
                <td>幼稚園</td>
                <td><?php echo $Minato_k['sum(copies)'];?></td>
                <td><input type="checkbox" name=""></td>
                <td><input type="text" name="clientname"></td>
    </tr>
        </table>
         </body>
    </html>

以上です。拙い説明で大変恐縮ですが、何卒よろしくお願いします。

jun68ykt

2018/01/14 14:53

ブラウザの開発者ツールで、意図通りになっていないテーブル付近の HTML を見てDOM の組み方がどうなっているか確認するとよいと思います。

bigin

2018/01/15 01:01

ありがとうございます。ディベロッパー　ツールのElementsの事でしょうか？みたところ、実装してもいない箇所が勝手に反映されているみたいですが、これはどうしてでしょう？

行動規範の内容に同意します

回答1件

ベストアンサー

追加しているdiv要素が悪さしているように見受けられます。

試してませんがこうしてみるとどうでしょうか？

js
1$('#tbl').append($('<tr>').load('ajax.index.php #min *'));

修正案

具体的にtdとしなかったので、子孫要素の関係を壊してしまったのかもしれません。

以下のようにしてみるとどうでしょう？

js
1$('#tbl').append($('<tr>').load('ajax.index.php #min td'));

投稿2018/01/14 15:04

編集2018/01/15 01:20

namnium1125

総合スコア2043

bigin

2018/01/15 01:02

ありがとうございます。この場合＊はどのような意味を持つのでしょうか？

bigin

2018/01/15 01:10

なお、いただいた案で実行するともう一歩というところまでいきました。ディベロッパーツールでみると以下のように、2箇所<td></td>から飛び出してしまいました。 <tr id="min"> <td>東京都</td> <td>港区</td> <td>幼稚園</td> <td><?php echo $Minato_k['sum(copies)'];?></td> <td></td> <input type="checkbox" name=""> <td></td> <input type="text" name="clientname"> </tr>

namnium1125

2018/01/15 01:22 編集

追記いたしました。よろしくお願いします。 `*`は全称セレクタといいまして、ここでは全子孫要素を取得しています。 https://developer.mozilla.org/ja/docs/Web/CSS/Universal_selectors

bigin

2018/01/15 01:29

ありがとうございます。おかげさまでうまくいきました。感謝申し上げます。なお、#minの後ろにtdを加えるとうまくいった理由がわからないのですが、可能であれば理由をご教示いただくことは可能でしょうか？全称セレクタのご説明もありがとうございます。

namnium1125

2018/01/15 01:45 編集

`#min`だと、`.load()`で取れる要素が`tr`要素になってしまうのがまずいんです。`tr`要素に`tr`要素を入れることはできません。ですので私が示した方法(`<div>`ではなく`<tr>`にする方法)では別の表現に変えさせていただきました。 `#min td`は、`#min`の子孫要素である`td`全てを取得する、というセレクタです。よって私の方法を言葉にすると、「`#min`要素がもつ全ての`td`を新たに用意した`tr`要素に入れてそれを`#tbl`に加える」という感じになるでしょう。

namnium1125

2018/01/15 01:51

CSSセレクタ自体も説明した方がいいような気がしたのでリンクを貼っておきます。 https://saruwakakun.com/html-css/reference/selector jQueryはCSSセレクタが使いやすいように設計されているみたいなので、CSSセレクタが使えそうであれば積極的に使ってみてください。

bigin

2018/01/15 04:21

とてもわかりやすい説明ですごく勉強になりました。本当にありがとうございました。

行動規範の内容に同意します