0
我嘗試使用jquery mobile的數據庫中的單選按鈕來填充表。 當我直接在HTML中創建表格時,表格沒有問題,但通過jscript創建同一個表格的結果並不相同。 在這個例子中,每個表只有一行,但我的目的是從數據庫創建錶行。由jquery mobile創建的表中的單選按鈕
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1" , charset="utf-8">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).on("pageshow", "#page1", function() {
// Create table
var retServiceName = 'James Smith by jquery';
var service_table = $('<table data-role="table" data-mode="columntoggle" class="ui-responsive table-stroke" id="service" data-column-btn-text="Columns..."></table>');
var service_tr_th = $("<thead><tr><th data-priority='1'>Name</th><th data-priority='2'>Vote</th></tr></thead>");
var service_tbody = $('<tbody></tbody>');
var service_tr = $('<tr></tr>');
var servicefieldset = '<fieldset> data-role="controlgroup" data-type="horizontal" data-mini="false"';
var serviceradio0 = '<input type="radio" name="radio-choice-b1" id="radio-choice-c1" value="0"><label for="radio-choice-c1">Yes</label>';
var serviceradio1 = '<input type="radio" name="radio-choice-b1" id="radio-choice-d1" value="1"><label for="radio-choice-d1">No</label>';
var serviceradio2 = '<input type="radio" name="radio-choice-b1" id="radio-choice-e1" value="2"><label for="radio-choice-e1">Null</label>';
var service_name_td = $('<td>' + retServiceName + '</td>');
var service_name_td2 = $('<td>' + servicefieldset + serviceradio0 + serviceradio1 + serviceradio2 + '</fieldset></td>');
service_name_td.appendTo(service_tr);
service_name_td2.appendTo(service_tr);
service_tr_th.appendTo(service_table);
service_tr.appendTo(service_tbody);
service_tbody.appendTo(service_table);
service_table.appendTo($("#categories"));
service_table.table();
});
</script>
<div data-role="page" id="page1">
<div data-role="header" data-theme="b">
<h1>Voting</h1>
</div>
<div role="main" class="ui-content">
<table data-role="table" data-mode="columntoggle" class="ui-responsive table-stroke" id="service" data-column-btn-text="Columns...">
<thead>
<tr>
<th data-priority='1'>Name</th>
<th data-priority='2'>Vote</th>
</tr>
</thead>
<td>James Smith by HTML</td>
<td>
<fieldset data-role="controlgroup" data-type="horizontal" data-mini="false">
<input type="radio" name="radio-choice-b2" id="radio-choice-c2" value="0">
<label for="radio-choice-c2">Yes</label>
<input type="radio" name="radio-choice-b2" id="radio-choice-d2" value="1">
<label for="radio-choice-d2">No</label>
<input type="radio" name="radio-choice-b2" id="radio-choice-e2" value="2">
<label for="radio-choice-e2">Null</label>
</fieldset>
</td>
</table>
<div id="categories"></div>
</div>
</div>
謝謝解塊! 問題的關鍵是$(「#categories」)。enhanceWithin(); – jopola