【问题标题】:Can jquery add closing element tags (markup) only?jquery 只能添加结束元素标签(标记)吗?
【发布时间】:2013-01-22 02:00:38
【问题描述】:

给定表中的第n行,jquery可以只添加标记来关闭表

        <tr class="eop">
            <td> 8/31 </td>
            <td> XYZ </td>
            <td> 2 </td>
            <td> 92.00 </td>
        </tr>

   </tbody>            --
</table>                 |
<table>                  --     //  inserted markup
   head jquery var       |
   <tbody>             --

我正在尝试的是使用:

$('tr.eop').append("</tbody></table><table>+head+<tbody>");   // head = table header

【问题讨论】:

    标签: jquery html append


    【解决方案1】:

    DOM 由元素节点组成,一旦元素是 DOM 或 DOM 片段的一部分,开始和结束标记就没有任何意义。

    您不能将没有结束标记的元素附加到页面。如果省略结束标签,则会为您创建一个。您也不能通过将结束标记附加为子元素来关闭父元素,它只会在父元素内创建一个新的完整元素。

    如果要创建新表,请创建一个新表。

    var newTable = $("<table><thead>"+head+"</thead><tbody></tbody></table>");
    $('tr.eop').closest("table").after(newTable)
    $('tr.eop').nextAll().appendTo(newTable.find("tbody"));
    

    【讨论】:

      【解决方案2】:

      如果不是一个好的做法,但它确实有效(我不确定它是否会在某些时候失败),看看这个例子:

      http://jsfiddle.net/MKSqy/

      但是我不确定您要完成什么,您可以通过操作 DOM 树轻松地做类似的事情。或者更改构建应用程序的方式,而不是使用表格,而是使用 div 并创建一个隐藏的或在需要时显示的。

      <div class="table">
          <div class="row">
              <div>8/31</div>
              <div> XYZ </div>
              <div> 2 </div>
              <div> 92.00 </div>
          </div>
          <div class="head" style="visible:none;"></div>
      </div>
      

      并操作 css 以创建表格样式。我建议这样做只是为了以防万一,但是 table 标签的存在是有原因的,你不应该滥用 divs

      编辑:我不太了解,所以这就是你需要的

      http://jsfiddle.net/MKSqy/1/

      这基本上是选择第 n 个元素之后的下一个元素并创建一个表并将其附加到前一个表的旁边。所以你不必处理关闭标签。

      【讨论】:

        【解决方案3】:

        请试试这个。看看它是否有效。

        var tt = $('tr.eop');
        tt.innerHTML = tt.innerHTML + '</tbody></table><table>'+head+'<tbody>';
        

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2019-12-10
          • 2021-08-28
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          相关资源
          最近更新 更多