Question

表格

    <table class="table table-striped table-hover universal" style="margin-bottom: 0px;">

        <tbody>
            <span id="appointment_info">
                <tr>
                <td>loading...</td>
                </tr>
            </span>
            <tr>
                <td>12:30 pm</td>
                <td>Jenny Harris</td>
                <td>Exam Room 1</td>
            </tr>
        </tbody>
    </table>

我正在使用span id="appointment_info"的{{1}}方法替换jQuery。

如下所示。

.html()

的console.log（html_str）; }

然而，这失败了。它以一种丑陋的格式在一列中连续打印所有内容。

生成的var html_str = ""; var apmts_len = apmts.length > 5 ? 5 : apmts.length; for (var i = 0; i < apmts_len; ++i) { html_str += "<tr> "; var info = apmts[i]; for (var j = 0; j < 3; ++j) { html_str = html_str + "<td>" + info[j] + "</td> "; } html_str += "</tr> ";看起来像html_str

我该如何解决这个问题？

Answer 1

您的HTML无效... tbody无法span作为其子级，无需使用span而是可以使用replaceWith喜欢

＆＃13;

var apmts = [
  [1.1, 1.2, 1.3],
  [2.1, 2.2, 2.3],
  [3.1, 3.2, 3.3]
]

var html_str = "";
var apmts_len = apmts.length > 5 ? 5 : apmts.length;

for (var i = 0; i < apmts_len; ++i) {
  html_str += "<tr> ";
  var info = apmts[i];
  for (var j = 0; j < 3; ++j) {
    html_str = html_str + "<td>" + info[j] + "</td> ";
  }
  html_str += "</tr> ";
}

$('#appointment_info').replaceWith(html_str)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table table-striped table-hover universal" style="margin-bottom: 0px;">
  <tbody>
    <tr id="appointment_info">
      <td>loading...</td>
    </tr>
    <tr>
      <td>12:30 pm</td>
      <td>Jenny Harris</td>
      <td>Exam Room 1</td>
    </tr>
  </tbody>
</table>

＆＃13;

另一种选择是使用单独的tbody来保存动态内容并将id分配给tbody并使用.html()设置其内容

＆＃13;

var apmts = [
  [1.1, 1.2, 1.3],
  [2.1, 2.2, 2.3],
  [3.1, 3.2, 3.3]
]

var html_str = "";
var apmts_len = apmts.length > 5 ? 5 : apmts.length;

for (var i = 0; i < apmts_len; ++i) {
  html_str += "<tr> ";
  var info = apmts[i];
  for (var j = 0; j < 3; ++j) {
    html_str = html_str + "<td>" + info[j] + "</td> ";
  }
  html_str += "</tr> ";
}

$('#appointment_info').html(html_str)

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table table-striped table-hover universal" style="margin-bottom: 0px;">
  <tbody id="appointment_info">
    <tr>
      <td>loading...</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td>12:30 pm</td>
      <td>Jenny Harris</td>
      <td>Exam Room 1</td>
    </tr>
  </tbody>
</table>

＆＃13;

使用Jquery .html方法填充表行

1 个答案: