Filling in table rows using Jquery .html method

Question

In table

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

I am replacing span id="appointment_info" using jQuery's .html() method.

Like below.

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

console.log(html_str); }

However, this failed. It prints everything in a row in one column, in an ugly format.

The generated html_str looks like <tr> <td>09:00 AM</td> <td>Richard Schwarm</td> <td>7</td> </tr>

How can I fix this?

your html is invalid... tbody can't have span as its child — Arun P Johny
– Arun P Johny, Commented Jan 22, 2015 at 5:57
It shouldn't matter what the line break formatting is. The browser does not care what white space you put in your html strings. — Daniel Nill
– Daniel Nill, Commented Jan 22, 2015 at 5:58

Arun P Johny · Accepted Answer · 2015-01-22 06:06:04Z

1

Your html is invalid... tbody can't have span as its child, there is no need to use a span instead you can use replaceWith like

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)

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

Another option is to use a separate tbody to hold the dynamic content and assign the id to that tbody and set its content using .html()

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)

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

edited Jan 22, 2015 at 6:06

answered Jan 22, 2015 at 5:59

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Eric Over a year ago

The problem is, there are multiple rows, and thus multiple <tr> ... </tr> tags

Eric Over a year ago

Oh then I could assign id to <tbody>?

Collectives™ on Stack Overflow

Filling in table rows using Jquery .html method

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related