Question

我的JQuery UI / Coldfusion应用程序中有一些代码，允许用户向表中添加行并删除所需的行。第一行不是动态创建的，因此JQuery Mobile样式应用于此行。如何将相同的样式添加到用户可能添加的动态创建的其他行？

我的代码是：

的javascript：

<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
$(document).ready(function () {
var counter = 0;

$("#addrow").on("click", function () {

    counter = $('#myTable tr').length - 2;

    var newRow = $("<tr>");
    var cols = "";

    cols += '<td><select name="urltype' + counter + '" id="urltype' + counter + '" data-native-menu="false"><option>Select a URL type</option><cfoutput query="variables.qryurltype"><option value="#NC_VALUE_ID#">#TC_MED_DESC#</option></cfoutput></select></td>';
    cols += '<td><input type="text" name="url' + counter + '"/></td>';

    cols += '<td><input type="button" class="ibtnDel"  value="Delete"></td>';
    newRow.append(cols);
    $("table.order-list").append(newRow);
    counter++;
});

$("table.order-list").on("click", ".ibtnDel", function (event) {
    $(this).closest("tr").remove();


    counter -= 1
    $('#addrow').attr('disabled', false).prop('value', "Add Row");
});

});


});//]]>  

</script>

我的html是：

  <table id="myTable" class="order-list">
<thead>
    <tr>
        <td>URL Type</td>
        <td>URL</td>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
            <select name="select_url_type" id="select_url_type" data-native-menu="false">
                <option>Select a URL type</option>
             <cfoutput query="variables.qryurltype">
                <option value="#NC_VALUE_ID#">#TC_MED_DESC#</option>
             </cfoutput>
            </select>   
        </td>
        <td>
            <input type="text" name="url" />
        </td>
        <td><a class="deleteRow"></a><input type="button" id="addrow" value="Add Row" /></td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <td colspan="5" style="text-align: right;">

        </td>
    </tr>
</tfoot>

我正在使用以下JQuery组件：

    <link rel="stylesheet" href="scripts/jquery.mobile-1.4.2.min.css" />
 <script src="scripts/jquery-1.9.0.js"></script>
 <script src="scripts/jquery.mobile-1.4.2.min.js"></script>

非常感谢任何帮助。

问候

JC

Answer 1

添加行后，可以在表上调用enhanceWithin（）：

$("table.order-list").append(newRow).enhanceWithin();

<强> DEMO

这假设您没有使用jQM表小部件，而只是表单元格中包含jQM小部件的普通表。

如何将JQuery移动样式添加到动态创建的表行

1 个答案: