单个div标签中的多个记录

Question

我将自动完成框的选定值绑定到div标签中

var data = "<div class='close'><table><tr><td rowspan='4' width='50px;'><img src='" + studentItem.Photo + "' Width='48' Height='48'  /></td><td>" + studentItem.Name + " ( <span class='stuId'>" + studentItem.StudentId + "</span> )</td><td align='right' ><div id='close' class='close16'/></td></tr><tr><td><table cellpadding='0' cellspacing='0'><tr><td>" + studentItem.Email + "</td><td>&nbsp;|&nbsp;</td><td>" + studentItem.Mobile + "</td></tr></table></td></tr></table></td></tr></table></div>";
            $('#students').css('background-color', '#FFAA55');
            $("#students").append(data);

和它绑定数据并在div标签中显示为

我希望每条记录都应该在一个单独的框中，例如在stackoverflow中查看标签框

我希望结果应该像上面那样.......我甚至试图将div脚本包含在一个表中，但是它显示了整行中的单个记录，而对于第二个记录，它来到了第二行，我尝试包括内联的css，也没有工作......我怎么能解决这个问题，任何人都可以帮助我..

我尝试将margin和float样式设置为div标签

<tr>
    <td colspan="10" >
        <div id="students" style="float: left; clear: both; margin: 25px"></div>
    </td>
</tr>

我尝试将边距设置为25px用于测试目的，现在输出为

只是文本框和div之间的空间不在div中的记录中，我该如何解决这个问题....

Answer 1

要分隔这些框，请使用margin。要让它们并排排列，但要换行，请使用float: left后跟clear: both元素，或使用display: inline-block。

Answer 2

如果您可以使用其他一些jQuery插件，那么这可能会有所帮助：jQuery Autosuggest

Answer 3

无需在var数据中创建<table>。 您可以将<table>放在外面 每次添加时，只需在<td>代码中添加<table><tr>。

否则根据情况使用多个<div>。

        <div id="Adddiv" runat="server" clientidmode="Static" >
        </div>

        ===============jQuery============
        var html = "<div id='Adddata'>";
        html += "<a herf='#' style='cursor: pointer;'>";
        html += "<img src='close.png' alt='' /></a>";
        html += "</div>";

        $("#Adddiv").append(html);