Question

我有一个嵌套的表结构，其中一部分由ajax调用呈现，该调用从服务器返回HTML。标记看起来像这样：

.. some html here
        <tr>
          <td><table cellpadding="0" cellspacing="0" border="0">
              <%-- Content will be displayed from ajax call 1 --%>
              <%-- Content will be displayed from ajax call 2 --%>
            </table>
          </td>
        </tr>
    </table>
.. more html

ajax调用返回以下html

<tr>
<td class="wpss_checkboxtd"><img width="16" height="16" src="../../images/someimg.png"></td>
</tr>
<tr>
<td class="wpss_checkboxtd"><img width="16" height="16" src="../../images/someimg.png"></td>
</tr>

在jquery中，我需要插入这个html，我需要一个元素来遍历，以便我可以调用该元素的html（）。不幸的是，如果我使用div，例如：

<table cellpadding="0" cellspacing="0" border="0">
<div id="divAjax1">
              <%-- Content will be displayed from ajax call 1 --%>
</div>
<div id="divAjax2">
              <%-- Content will be displayed from ajax call 2 --%>
</div>
</table>

设置类以使div或span导致其他问题。

我需要的是一种识别从JQuery插入此HTML的位置的方法。我有什么想法吗？

Answer 1

您可以使用多个<tbody>部分，并将ID放在这些部分上。

这样你就可以拥有有效的HTML标记：

<table cellpadding="0" cellspacing="0" border="0">
<thead>
              <!-- header section -->
</thead>
<tbody id="divAjax1">
              <!-- Content will be displayed from ajax call 1 -->
</tbody>
<tbody id="divAjax2">
              <!-- Content will be displayed from ajax call 2 -->
</tbody>
</table>

Answer 2

您可以使用$("td > table").html(<HTML from your AJAX call>)插入HTML

Answer 3

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        function ajaxCall1() {
            debugger;
            var html = '<tr><td class="wpss_checkboxtd">ajaxcall 1 <img width="16" height="16" src="../../images/someimg1.png"></td></tr>'

            $(html).appendTo("#foo");
        }
        function ajaxCall2() {
            var html = '<tr><td class="wpss_checkboxtd">ajaxcall 2 <img width="16" height="16" src="../../images/someimg2.png"></td></tr>'

            $(html).appendTo("#foo");
        }
    </script>
</head>
<body>
<input type="button" onclick="ajaxCall1()" value="ajax call 1" />
<input type="button" onclick="ajaxCall2()" value="ajax call 2" />
    <table>
        <tr>
            <td>
                <table cellpadding="0" cellspacing="0" border="0" id="foo">
                    <%-- Content will be displayed from ajax call 1 --%>
                    <%-- Content will be displayed from ajax call 2 --%>
                </table>
            </td>
        </tr>
    </table>
</body>
</html>

使用某种占位符在jquery中查找元素

3 个答案: