Question

我想在HTML文档中准备一个表格行作为模板，以便不在JS中输入它，就像我主要做的那样。我刚刚将DOM元素保存为JQuery对象并进行克隆，但是在元素中执行它似乎不会保存为对象。

我在JS中避免声明：

var _row = '<tr><td></td></tr>';

因为我想通过JS将元素设置为动态而不是将其声明为字符串，所以我正在尝试为表格行创建HTML模板。

在HTML中：

<tr id='sampleRow'></tr>

在JS中：

var _row = $('#sampleRow');

当安慰日志时，_row将提供 init 的结果，而不是对象。

我怎么可能这样做？

在HTML中：

<div class='sampleDiv'></div>

在JS中：

var _container = $('.sampleDiv').clone();

它是一个对象。

Answer 1

我刚刚找到了解决方案，

而不是用作表行模板的容器，当你通过JQuery调用它并克隆它并附加到表时没有任何反应时，我使用了一个表作为容器。

在HTML中：

<table class="destTable">
</table>

<table class="tableRowTmp" hidden>
    <tr><td colspan="6">Sample</td></tr>
</table>

在JS中：

var oBannerTable = $('.destTable');
var oRow = $('.tableRowTmp').find('tr').clone();

oBannerTable.append(oRow.show());

Answer 2

我个人更喜欢在javascript中通过jQuery声明像这样的简单对象

$("<tr />", {  text: 'Table Row txt',
               class: 'some class',
               id: 'elementid'
             }).appendTo("tbody");

如果你想为那个tr添加元素你可以链接它并使用append，看起来像

$("<tr />", {  text: 'Table Row txt',
               class: 'some class',
               id: 'elementid'
             }).append($('<div />', {
               text: 'Some text inside the div',
               class: 'anotherclass'
             })).appendTo("tbody");

哪会使

<tr class='some class' id='elementid'>Table Row txt
  <div class='anotherclass'>Some Text inside the div</div> 
<tr/>

如果您想使用html作为模板，我建议使用像John Resig建议的方法

http://ejohn.org/blog/javascript-micro-templating/

所以你可以做到

<script type='companyname/mytemplate' id='trTemplate'>
 <tr id='sampleRow'></tr>
</script>

var template = $($("#trTemplate").innerHtml());

JQuery，添加表行而不在Javascript中声明标记

2 个答案: