0

我正在尝试使用 jQuery 在表格内动态创建复选框、按钮和 2 个输入框。下面是我的 jQuery 代码，它创建了元素但没有正确创建列。我错过了什么？

var contentTblOpen = "<table border='4'>";
        var contentTblClose = "</table>";
        var contentTrOpen = "<tr>";
        var contentTrClose = "</tr>";
        var contentTdOpen = "<td>";
        var contentTdClose = "</td>";


        $("#Quote" + id).after(

            contentTblOpen
        ).append(
            contentTrOpen
        ).append(
            contentTdOpen
        ).append(
        $(document.createElement("input")).attr({
            id: 'RL_' + rLCount + '__Delete'
        , name: 'RL[' + rLCount + '].Delete'
        , type: 'checkbox'
        , checked: false
        })
        .click(function (event) {
            var cbox = $(this)[0];
            alert(cbox.value);
        })
        ).append(
        $(document.createElement("input")).attr({
            id: 'Line' + rLCount
        , name: 'Line' + rLCount
        , value: 'Line' + rLCount
        , class: 'ClsrLButton'
        , type: 'button'
        })
        ).append(
            contentTdClose + contentTdOpen
        ).append(
        $(document.createElement("input")).attr({
            id: 'RL_' + rLCount + '__TextLine'
        , name: 'RL[' + rLCount + '].TextLine'
        , value: 'RL_' + rLCount + '__TextLine'
        , type: 'input'
        })
        ).append(
            contentTdClose + contentTdOpen
        ).append(
        $(document.createElement("input")).attr({
            id: 'RL_' + rLCount + '__Amount'
        , name: 'RL[' + rLCount + '].Amount'
        , value: 'RL[' + rLCount + '].Amount'
        , type: 'input'
        }).append(
            contentTdClose + contentTrClose + contentTblClose
        )
        );
4

2 回答 2

1

而不是做一系列append创建一个长字符串（类似）：

'<table><tr><td><input id="RL_0__Delete" name="RL[0].Delete" type="checkbox">...'

var newTable = contentTblOpen 
               + contentTrOpen
               + contentTdOpen
               + "<input " + "id='RL_" + rLCount + "__Delete'" + "type='checkbox' >"

并附加此字符串。

顺便说一句，操作 DOM 非常慢，所以如果你创建一个字符串并一次性附加所有内容，你会赢得几毫秒。

于 2013-02-25T14:17:14.733 回答
0

这里的主要缺陷是每次调用.append()浏览器都会创建一个有效的 DOM。因此，只要您插入<tr>没有 a</tr>的浏览器就会</tr>为您插入，结果将是一个有效的 DOM，但它不会是您最初想要的。

请查看strah的答案，它应该对您有所帮助。

于 2013-02-25T14:27:33.107 回答