0

HTMLをdivに出力するためにAJAXを使用しました。

AJAXでテーブルを表示できると思いましたが、divに出力するため、出力されません。 <td>コードなどは無視されます。とにかく、テーブルレス表示の方が優れていると考えられていることは知っていますが、CSSは非常に苦手です。

誰かがテーブルなしで次の簡単な出力を表示する方法を提案できますか？テキストの長さが異なる場合は、主に列を揃える必要があります。

HTML

<div id="displayhere"></div>

出力テーブルをdivに配置する方法がわからない場合を除いて、divに移動したいと思います。

<tr><td colspan=2>Heading</td></tr>
<tr><td>Short text option 1</td><td><input type="checkbox"></td></tr>
<tr><td>Really long text Option 2</td><td input type="checkbox"></td></tr>
4

3 に答える 3

2

簡単な形式で行う必要があるのは、次のとおりです。

var output = '<tr><td colspan=2>Heading</td></tr><tr><td>Short text option 1</td><td><input type="checkbox"></td></tr><tr><td>Really long text Option 2</td><td><input type="checkbox"></td></tr>',
    table = $('<table />').appendTo('#displayhere'),
    tbody = $('<tbody />').html(output).appendTo(table);

JS Bin デモ.

于 2012-07-09T11:04:15.000 に答える
1

divタグ内にテーブルを持つことができます..以下はうまくいきます

<div id="displayhere">
<table>
<tr>
    <td colspan=2>Heading</td>
</tr>
<tr>
    <td>Short text option 1</td>
    <td><input type="checkbox"></td>
</tr>
<tr>
    <td>Really long text Option 2</td>
    <td> <input type="checkbox"></td></tr>
</table>
</div>
于 2012-07-09T11:11:54.700 に答える
1

@DavidThomasが暗示しているように、HTML テーブルを 内に持つことができます。タグをタグでラップしないと、タグを<div>持つことはできません。<tr><table>

挿入する HTML は、いくつかの方法で改善できることに注意してください。

  1. テーブル内のセルの見出し用のタグがあります: <th>. 見出しが複数の行に適用される場合は、それらの行を<tbody>タグでラップし、のscope属性をに<th>設定する必要がありますrowgroup

  2. フォーム コントロールにラベルを付ける場合は、ラベル テキストを<label>要素で囲み、フォーム コントロールの 属性に<label>'sfor属性を設定する必要がidあります。

これが改善されたコードです。スクリーン リーダーのユーザーは、次のコードを簡単に処理できます。

<tbody>
    <tr>
        <th scope="rowgroup" colspan="2">Heading</th>
    </tr>
    <tr>
        <td><label for="option1">Short text option 1</label></td>
        <td><input id="option1" type="checkbox"></td>
    </tr>
    <tr>
        <td><label for="option2">Really long text Option 2</label></td>
        <td><input id="option2" type="checkbox"></td>
    </tr>
</tbody>
于 2012-07-09T11:17:35.617 に答える