jquery mobile创建的表中的单选按钮答案

【问题标题】：Radio button in table created by jquery mobilejquery mobile创建的表中的单选按钮
【发布时间】：2017-10-13 07:27:18
【问题描述】：

我尝试通过 jquery mobile 使用数据库中的单选按钮填充表格。当我直接在 HTML 中制作表格时，表格是可以的，但是通过 jscript 制作同一张表格，结果根本不一样。在这个例子中，每个表只有一行，但我的目的是从数据库创建表行。

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

【问题讨论】：

标签： javascript jquery html jquery-mobile

【解决方案1】：

您可以通过复制粘贴到一些在线工具（例如 Plunker 或 Fiddle）中轻松找出 HTML 中是否存在问题：

如果您从数据库数据中编写 HTML，首先要注意的也是最明显的事情，就是为您的 HTML 元素保留唯一标识符。剩下的只是耐心和毅力的问题。恕我直言，完成这种无聊任务的最简单方法是将 HTML 组合成一个字符串，您可以随时在在线工具中检查（“Tidy”）。

最后，您可以一次性插入和增强整个 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>

【讨论】：

感谢解封器！问题的关键是 $("#categories").enhanceWithin();