stackoom
  简体   繁体   中英

Radio button in table created by jquery mobile

 原文  2017-10-13 07:27:18  9   1    javascript/ jquery/ html/ jquery-mobile

Question

I try to populate a table with radio buttons from database by jquery mobile. The table is ok when I make it directly in HTML, but making the same table by jscript the result is not the same at all. In this example there is only on row per table, but my purpose is to create table rows from database. 

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

1 answers

solution1
 0 ACCPTED  2017-10-15 08:11:44

You can easily find out if in your HTML are some issues by copy and paste in some online tools, for example Plunker, or Fiddle:

在此处输入图片说明

The first and most obvious thing to pay attention to if you are composing HTML from database data, is to keep unique identifier for your HTML elements. The rest is just only a matter of patience and perseverance. IMHO the easiest way to achieve such a boring task is to compose the HTML in a string which you can always check in an online tool ("Tidy").

At the end, you can insert and enhance the whole HTML just in one shoot. For the new inserted content, JQM .enhanceWithin() on the container will suffice, no need for all the append stuff here. 

 $(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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to add dynamic radio button to dynamic created table in jquery Setting button radio with JQuery mobile Jquery mobile radio button alignment Dynamically created Radio button Jquery JQuery Mobile : Radio Button Doesn't Reflect Show hide the list by radio button in Jquery Mobile jQuery Mobile selection of radio button not working Jquery how to select dynamically created radio button Get radio button value after change page on Jquery Mobile jquery mobile set selected value of a radio button group
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM