如何將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>

任何幫助將不勝感激。

問候

來源

2014-04-23 jeeperscreepers

不知道是什麼問題。您的表格中沒有指定任何樣式。添加的行應該只是選取父容器的樣式。作爲一個例子，我從你提供的代碼創建了一個jsFiddle，它工作正常。 [看到這裏的例子]（http://jsfiddle.net/HE6GY/） –

您可以添加行後呼籲臺enhanceWithin（）：

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

DEMO

這是假設你沒有使用jQM表小部件，而只是表格單元格中包含jQM小部件的普通表。

來源

2014-04-23 14:40:31 ezanker

謝謝，作品一種享受。 – jeeperscreepers

如何將JQuery移動樣式添加到動態創建的表格行

回答

相關問題