用javascript创建复杂的HTML

这是一个典型的问题。假设您有一个数据表，可以在其中动态添加、更新和删除行（在ajax中）。
您的数据表很复杂，有许多字段、下拉列表、文本框等

如何在javascript中创建行？我目前有很多JS/Jquery创建和填充节点，但我发现它非常难看，而且不太可重用

我的aspx是：

<!-- table to contain the data -->
<table id="facetsTable">
    <thead>
        <tr>
            <td>&nbsp;</td>
            <th>Label</th>
            <th>Display type</th>
            <th>Is filter</th>
            <th>Sort type</th>
            <th>&nbsp;</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
<br />

<!-- dropdown containing the facets to add -->
<asp:DropDownList runat="server" ID="facetsToAddDdl">
    <asp:ListItem Text="" Value=""></asp:ListItem>
</asp:DropDownList>
<asp:Button runat="server" ID="facetAddButton" Text="[ADD]" />

<!-- hidden fields to contain both the current data and all the possible data -->
<asp:HiddenField runat="server" ID="facetsSerializedHidden" />
<asp:HiddenField runat="server" ID="allAttributesSerializedHidden" />

var allAttributes = null;

/*****************************
* Adds a facet to the table
*****************************/
function facetAdd(data) {
    // build the table row
    var tr = $('<tr>');

    // "move" handle
    tr.append($('<td>').addClass('handle').append($('<img/>').attr('src', 'img/drag-drop.gif')));

    // label
    tr.append(
        $('<td>')
        .addClass('label')
        .text(data.attr.DefaultListLabel.DefaultValue + ' (' + data.attr.Code + ')')
        .append($('<input />').attr('type', 'hidden').attr('name', 'code').val(data.attr.Code)));

    // display type
    var disp = $('<select>').attr('name', 'displayType');
    // snip: fill options of the select
    if (data.facet && data.facet.DisplayType !== '') { disp.val(data.facet.DisplayType) }
    disp.change(function () { serializeFacets(); });
    tr.append($('<td>').append(disp));

    // ###### snip similar logic for the other fields ######

    // 'remove' image button
    var delImg = $('<img />').attr('src', 'img/delete.png');
    delImg.click(function () { facetRemove($(this)) });
    tr.append($('<td>').addClass('delete').append(delImg));

    // add the row to the table
    $('#facetsTable tbody').append(tr);
}

/*****************************
* Removes a facet from the table
*****************************/
function facetRemove(src) {
    var tr = src.parents('tr');
    var code = tr.find('[name=code]').val();
    var label = tr.find('td.label').text();

    // remove from table
    $(tr).remove();

    // add back item to dropdown list
    var drop = $('#<%= facetsToAddDdl.ClientID %>');
    drop.append($('<option>', { value: code, text: label }));

    // re-serialize
    serializeFacets();
}

/*****************************
* Serialize the facets
*****************************/
function serializeFacets() {
    var ser = [];
    var i = 0;
    $('#facetsTable tbody tr').each(function () {
        var facet = new Object();
        facet.Code = $(this).find('[name=code]').val();
        facet.Id = $(this).find('[name=code]').val();
        facet.DisplayType = $(this).find('[name=displayType]').val();
        facet.IsFilter = $(this).find('[name=isFilter]').prop('checked');
        facet.SortType = $(this).find('[name=sortType]').val();
        facet.Order = i;

        ser.push(facet);
        i++;
    });

    $('#<%= facetsSerializedHidden.ClientID %>').val(JSON.stringify(ser));
}

/*****************************
* Activate sorting on the table
*****************************/
function activateSorting() {
    $('#facetsTable tbody').sortable({
        stop: function () { serializeFacets(); },
        handle: ".handle"
    });
}

/*****************************
* Get the facet data from the attributes list
*****************************/
function getFacetData(code, existingFacet) {
    if (allAttributes === null) { return null; }

    for (var i = 0; i < allAttributes.length; i++) {
        if (allAttributes[i].Code === code) {
            var facet = {};
            if (existingFacet === null) {
                facet.Code = code;
                facet.Id = code;
                facet.Order = -1;
            } else {
                facet = existingFacet;
            }

            return { attr: allAttributes[i], facet: facet };
        }
    }

    return null;
}

$(function () {
    // read attributes list
    var allAttributesSerialized = $("#<%= allAttributesSerializedHidden.ClientID %>").val();
    if (allAttributesSerialized !== '' && allAttributesSerialized !== null) {
        allAttributes = JSON.parse(allAttributesSerialized);
    }

    // activate sorting on the table
    activateSorting();

    /*****************************
    * Initialize facets on load
    *****************************/
    var currentFacetsSerialized = $('#<%= facetsSerializedHidden.ClientID %>').val();
    if (currentFacetsSerialized !== '' && currentFacetsSerialized !== null) {
        var currentFacets = JSON.parse(currentFacetsSerialized);
        for (var i = 0; i < currentFacets.length; i++) {
            facetAdd(getFacetData(currentFacets[i].Code, currentFacets[i]));
        }
    }

    /*****************************
    * Add a facet to the table on button click
    *****************************/
    $("#<%= facetAddButton.ClientID %>").click(function () {
        var code = $('#<%= facetsToAddDdl.ClientID %>').val();

        if (code === null || code === '') { return false; }

        facetAdd(getFacetData(code, null));
        $('#<%= facetsToAddDdl.ClientID %> option:selected').remove();
        activateSorting();
        serializeFacets();

        return false;
    });
});

---

我希望将我的行的HTML放在一个可以在ajax中调用的用户控件中（例如，通过一个服务），这样我就可以在JS和.net中创建一行，但我不确定如何继续。

您可以使用前端模板技术。我在下面提供了一个快速而肮脏的香草JS解决方案，但是您可以获得jQuery插件（我看到您的问题上有一个jQuery标记），并使用模板语言将一些数据绑定逻辑放入模板中。Angular.js也可能是您感兴趣的东西

var templateText，
生成德尔，
主播，
obj；
//“JSON”数据（可通过AJAX加载）
obj={'text'：'Hello World'，'href'：'#'}；
//获取模板文本
templateText=document.getElementById（'my-template'）.text.trim（）；
//创建一个DIV并在其中生成HTML
generatedEl=document.createElement（'div'）
generatedEl.innerHTML=模板文本；
//使用obj数据修改HTML内容
anchorEl=generatedEl.getElementsByTagName（'a'）[0]；
anchorEl.text=obj.text；
anchorEl.href='#'；
//插入生成的HTML（假定只存在一个顶级元素）
document.getElementById（'my-container'）.appendChild（generatedEl.childNodes[0]）
您可以使用前端模板技术。我在下面提供了一个快速而肮脏的香草JS解决方案，但是您可以获得jQuery插件（我看到您的问题上有一个jQuery标记），并使用模板语言将一些数据绑定逻辑放入模板中。Angular.js也可能是您感兴趣的东西


var templateText，
生成德尔，
主播，
obj；
//“JSON”数据（可通过AJAX加载）
obj={'text'：'Hello World'，'href'：'#'}；
//获取模板文本
templateText=document.getElementById（'my-template'）.text.trim（）；
//创建一个DIV并在其中生成HTML
generatedEl=document.createElement（'div'）
generatedEl.innerHTML=模板文本；
//使用obj数据修改HTML内容
anchorEl=generatedEl.getElementsByTagName（'a'）[0]；
anchorEl.text=obj.text；
anchorEl.href='#'；
//插入生成的HTML（假定只存在一个顶级元素）
document.getElementById（'my-container'）.appendChild（generatedEl.childNodes[0]）
我以前也遇到过类似的问题。对我有效的解决方案是使用一个模板JS函数，该函数将获取当前表的行数，然后为该行创建所有HTML元素，然后将它们附加到表中。您可以使用ASP生成的表执行此操作，也可以使用文本并使用
stringbuilder
（我的首选）在后端生成表。
我以前也遇到过类似的问题。对我有效的解决方案是使用一个模板JS函数，该函数将获取当前表的行数，然后为该行创建所有HTML元素，然后将它们附加到表中。您可以使用ASP生成的表执行此操作，或者使用文本并使用
stringbuilder
（我的首选项）在后端生成表。
阅读：

您可以使用来动态创建元素：


$（函数（）{
var obj={'id'：'anchor1'，'text'：'Hello World'，href:'#'}；
$（''，obj）.appendTo（document.body）
console.log（document.getElementById（'anchor1'）.outerHTML）；
});
阅读：

您可以使用来动态创建元素：


$（函数（）{
var obj={'id'：'anchor1'，'text'：'Hello World'，href:'#'}；
$（''，obj）.appendTo（document.body）
console.log（document.getElementById（'anchor1'）.outerHTML）；
});
开始研究模板系统，并选择最适合您的模板系统。它目前“丑陋”的地方是什么？（也许这属于代码审查网站，而不是堆栈溢出？）我想我应该用JavaScript创建一些模板函数，用给定的一组值创建行，并在需要添加行时调用该函数。这是一个相当开放的问题。请缩小范围并发布一个-除非我错了（然后忽略我），通常你会使用某种模板库来实现这一点。如果您想手工硬编码，有两种思路：要么使用createElement/cloneNode创建所有节点，然后附加它们。或者使用字符串和innerHTML。最可维护的解决方案是创建一些能为您做到这一点的功能。开始研究模板系统，并选择最适合您的模板系统。它目前有什么“丑陋”之处？（也许这属于代码审查网站，而不是堆栈溢出？）我想我应该用JavaScript创建一些模板函数，用给定的一组值创建行，并在需要添加行时调用该函数。这是一个相当开放的问题。请缩小范围并发布一个-除非我错了（然后忽略我），通常你会使用某种模板库来实现这一点。如果您想手工硬编码，有两种思路：要么使用createElement/cloneNode创建所有节点，然后附加它们。或者使用字符串和innerHTML。最可维护的解决方案是创建一些可以为您实现这一点的函数。