0

I am binding the selected values of autocomplete box into a div tag as

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);

and its binding the datas and displyaing in the div tag as

enter image description here

I want the each record should be in a seperate box, for example look at tag box in our stackoverflow

enter image description here

i want the result should be like this above.......I even tried to include the div script into a table, but it displays the single record in a whole row, and for the second record it comes to the second row,and I tried including the css inline,that also not working... how can I fix this, can anyone help me..

I tried to set the margin and float style to my div tag as

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

i tried by setting the margin as 25px for testing purpose and now the output is

enter image description here

just the space coming between the textbox and div not among records within div, how can I fix this....

4

3 回答 3

2

To separate the boxes, use margin. To get them to line up side by side, but wrapping, use float: left followed by a clear: both element, or use display: inline-block.

于 2012-04-10T10:30:04.750 回答
1

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

于 2012-04-10T10:30:49.873 回答
1

无需<table>在 var 数据中创建。您可以放在<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);
于 2012-04-10T10:31:32.480 回答