Question

我正在尝试动态创建一个Checkbox，Button＆amp; 2使用jQuery在表格内输入框。下面是我的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
        )
        );

Answer 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' >"

并附加此字符串。

BTW，操纵DOM非常慢，所以如果你创建一个字符串并一次追加所有内容你就会赢得几毫秒。

Answer 2

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

请查看strah的答案，它可以帮到你。

jQuery - 在表中创建元素

2 个答案: