0

我使用了一些 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>
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 暗示的那样，您可以在 a 中有一个 HTML 表格，如果不将它们包装在标签中<div>，您就不能拥有标签。<tr><table>

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

  1. 表格内的标题单元格有一个标签：<th>. 如果标题适用于多行，那么您应该将这些行包装在<tbody>标签中，并将scope属性设置<th>为rowgroup

  2. 当您为表单控件添加标签时，您应该将标签文本包装在一个<label>元素中，并将<label>'for属性设置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 回答