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

问题描述：

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

我的代码是这样的：

的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>

任何帮助将不胜感激。

问候

不知道是什么问题。您的表格中没有指定任何样式。添加的行应该只是选取父容器的样式。作为一个例子，我从你提供的代码创建了一个jsFiddle，它工作正常。 [看到这里的例子]（http://jsfiddle.net/HE6GY/） –

答

您可以添加行后呼吁台enhanceWithin（）：

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

DEMO

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

谢谢，作品一种享受。 – jeeperscreepers

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

相关推荐