由jquery mobile創建的表中的單選按鈕

我嘗試使用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>

來源

2017-10-13 jopola

你可以很容易找到，如果你的HTML一些問題通過複製和一些在線工具粘貼，例如Plunker，或小提琴：

如果您要從數據庫數據中編寫HTML，首先要注意的一件事是爲您的HTML元素保留唯一的標識符。其餘的只是一個耐心和毅力的問題。恕我直言，最簡單的方式來實現這樣一個無聊的任務是組成一個字符串，你可以隨時檢查在線工具（「整潔」）的HTML。

最後，您可以在一次拍攝中插入和增強整個HTML。對於新插入的內容，容器上的JQM .enhanceWithin()就足夠了，不需要這裏的所有append東西。

$(document).on("pageshow", "#page1", function() { 
 
    var html = ""; 
 
    $("#categories").html(html); // clean-up 
 

 
    // start the tables loop 
 
    var sectionId = "service-1"; // compose unique id's 
 
    html += '<table data-role="table" data-mode="columntoggle" class="ui-responsive table-stroke" id="' + sectionId + '" data-column-btn-text="Columns...">'; 
 
    html += '<thead><tr><th data-priority="1">Name</th><th data-priority="2">Vote</th></tr></thead>'; 
 
    html += '<tbody>'; 
 

 
    // start the rows loop 
 
    html += '<tr>'; 
 
    var retServiceName = 'James Smith by jquery'; 
 
    html += '<td>' + retServiceName + '</td>'; 
 
    html += '<td>'; 
 
    html += '<fieldset data-role="controlgroup" data-type="horizontal" data-mini="false">'; 
 
    var rowId = "radio-choice-b1"; // compose unique id's 
 

 
    // start the choices loop, compose unique id's 
 
    var choiceVal = "0"; 
 
    var choiceId = rowId + "-" + choiceVal; 
 
    var choiceLabel = "Yes"; 
 
    html += '<input type="radio" name="' + rowId + '" id="' + choiceId + '" value="' + choiceVal + '"><label for="' + choiceId + '">' + choiceLabel + '</label>'; 
 

 
    var choiceVal = "1"; 
 
    var choiceLabel = "No"; 
 
    var choiceId = rowId + "-" + choiceVal; 
 
    html += '<input type="radio" name="' + rowId + '" id="' + choiceId + '" value="' + choiceVal + '"><label for="' + choiceId + '">' + choiceLabel + '</label>'; 
 

 
    var choiceVal = "2"; 
 
    var choiceLabel = "Null"; 
 
    var choiceId = rowId + "-" + choiceVal; 
 
    html += '<input type="radio" name="' + rowId + '" id="' + choiceId + '" value="' + choiceVal + '"><label for="' + choiceId + '">' + choiceLabel + '</label>'; 
 

 
    html += '</fieldset>'; 
 
    html += '</td>'; 
 
    html += '</tr>'; 
 

 
    html += '</tbody>'; 
 
    html += '</table>'; 
 
    console.log(html); // check the whole html 
 

 
    $("#categories").html(html); 
 
    $("#categories").enhanceWithin(); 
 

 
});

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Login</title> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css"> 
 
    <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> 
 
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div data-role="page" id="page1" data-theme="a"> 
 
    <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> 
 
     <tbody> 
 
      <tr> 
 
      <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> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
     <div id="categories"></div> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-10-15 08:11:44 deblocker

謝謝解塊！問題的關鍵是$（「＃categories」）。enhanceWithin（）; – jopola

由jquery mobile創建的表中的單選按鈕

回答

相關問題