Question

我使用了一些AJAX将HTML输出到div。

我认为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>

Answer 1

您需要做的只是简单形式：

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 demo

Answer 2

您可以在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>

Answer 3

作为@DavidThomas implies，您可以在<div>中放置一个HTML表格，但如果没有将<tr>标记包装在<table>标记内，则无法使用<th>个标记。

我注意到您要插入的HTML也可以通过以下几种方式进行改进：

表格中的标题单元格有一个标记：<tbody>。如果标题适用于多行，则应将这些行包装在scope标记中，并将<th>的{{1}}属性设置为rowgroup
< / LI>
当您标记表单控件时，应将标签文本包装在<label>元素中，并将<label>的{{1}}属性设置为{{ 1}}其形式控制。

这是改进的代码。屏幕阅读器用户会发现处理此代码更容易：

for

CSS模仿div中的简单表

HTML

输出我想进入div，除了不确定如何将表放在div中：

3 个答案: