Solved

Unable to assign a string value to an innerHTML data member in javascript

Posted on 2011-02-15

3 solutions

Medium Priority

550 Views

Last Modified: 2012-06-27

This is my JSP with html and javascript:

<div id="myPageResultContentDiv" style='display:none'>
<table id='myPageContentTable' class="content" style="width: 995px;">
                         <thead>
<tr id="0">
<th style="width: 104px;" class="active"><a id="sc0" name="sc0" href="javascript:void(0)" onClick="javascript:redoSort(0);">Serial Number</a></th>
<th style="width: 130px;" class="active"><a id="sc1" name="sc1" href="javascript:void(0)" onClick="javascript:redoSort(1);">Product Name</a></th>
<th style="width: 210px;" class="active"><a id="sc2" name="sc2" href="javascript:void(0)" onClick="javascript:redoSort(2);" class="down">Marketing Program Name</a></th>
                                    <th style="width: 210px;" class="active">Marketing Program Description</th>
<th style="width: 30px;">Remove</th>
</tr>
</thead>
                  </table>
</div>

I'm trying to populate most of the table using this line:
document.getElementById('myPageContentTable').innerHTML=strVar;

strVar is a string that contains <tr> and <td> tags that are rows that I want to insert into the table myPageContentTable using the innerHTML data member. When I try to do it the header is not showing at all in my table. Any suggestions?

Comment

Question by:jwright9

[X]

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

Help others & share knowledge
Earn cash & points
Learn & ask questions

Join The Community

4 Comments

LVL 14

Accepted Solution

by:Designbyonyx

Designbyonyx earned 1332 total points

ID: 349012822011-02-15

What you are essentially doing is replacing everything inside the TABLE tag, which will replace your THEAD code. Try this:

var tBody = document.createElement("tbody");
tBody.innerHTML = strVar; // Add the rows and cells
document.getElementById('myPageContentTable').appendChild(tbody);

Open in new window

LVL 20

Assisted Solution

by:thehagman

thehagman earned 668 total points

ID: 349020712011-02-15

... and in fact it may give cleaner code if you take the effort to populate the tBody also with DOM methods (createElement, appendChild etc.) instead of using innerHTML

LVL 14

Assisted Solution

by:Designbyonyx

Designbyonyx earned 1332 total points

ID: 349024812011-02-15

well, I would contest that comment by saying that string concatenation and a single DOM manipulation is much faster than many DOM manipulations. Whenever possible, it is good practice to use string concatenation to build html, and use as few DOM methods as possible. Each time you call a DOM method, the DOM must be parsed and rendered by the browser. You would probably notice an application start to slow down with a couple hundred rows being added, each with 8 cells of data. That would be several thousand DOM manipulations as opposed to 1 or 2 if you use string concatenation.

You would especially notice a bog down if you were using jQuery and calling it's DOM functions one at a time. And sometimes, string concatenation is cleaner (see below)

var jsonObj = { Some JSON Object with rows of data };
var table = document.getElementById('myPageContentTable');
var tbody = document.createElement('tbody');

// --------------------------------------
// String concatenation - very fast
var tableCode = '';
for (var row in jsonObj) {
  tableCode += '<tr>';
  
  for (var cell in row) {
    tableCode += '<td>' + row[cell] + '</td>;
  }
  
  tableCode += '</tr>';
}
tbody.innerHTML = tableCode;
table.appendChild(tbody);


// --------------------------------------
// Or this, which would be much slower

for (var row in jsonObj) {
  var tr = document.createElement('tr');
  
  for (var cell in row) {
    var td = document.createElement('td');
    td.innerHTML = row[cell];
    tr.appendChild(td);
  }
  
  tbody.appendChild(tr);
}
table.appendChild(tbody);

Open in new window

LVL 20

Expert Comment

by:Proculopsis

ID: 349051962011-02-16

Try something likr this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_26823698.html</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

jQuery(document).ready( function () {

  $("#click-me").click( function() {
    $("#myPageResultContentDiv").show();
    
    var strVar = $("#strVar").text();
    $("#myPageContentTable>thead").after( strVar );

  });

});

</script>
</head>
<body>

<input id="click-me" type="button" value="Click Me!">

<div id="myPageResultContentDiv" style='display:none'>
  <table id='myPageContentTable' class="content" style="width: 995px;">                  
    <thead>                                  
      <tr id="0">                                          
        <th style="width: 104px;" class="active"><a id="sc0" name="sc0" href="javascript:void(0)" onClick="javascript:redoSort(0);">Serial Number</a></th>
        <th style="width: 130px;" class="active"><a id="sc1" name="sc1" href="javascript:void(0)" onClick="javascript:redoSort(1);">Product Name</a></th>
        <th style="width: 210px;" class="active"><a id="sc2" name="sc2" href="javascript:void(0)" onClick="javascript:redoSort(2);" class="down">Marketing Program Name</a></th>
        <th style="width: 210px;" class="active">Marketing Program Description</th>                                    
        <th style="width: 30px;">Remove</th>
      </tr>                              
    </thead>                        
  </table>           
</div>

<fieldset style="width: 50%; padding: 20px;"><legend>Simulate <b>strVar</b> text</legend>
  <textarea id="strVar" style="width: 100%;" rows="10">

<tbody>
  <tr>
    <td>Row 1</td>
    <td>a</td>
    <td>b</td>
    <td>c</td>
    <td>d</td>
  </tr>
  <tr>
    <td>Row 2</td>
    <td>e</td>
    <td>f</td>
    <td>g</td>
    <td>h</td>
  </tr>
  <tr>
    <td>Row 4</td>
    <td>i</td>
    <td>j</td>
    <td>k</td>
    <td>l</td>
  </tr>
</tbody>

  </textarea>
</fieldset>

</body>
</html>

Open in new window

Featured Post

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Beginner's Guide to HTML and CSS

Article by: Experts Exchange

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.

What makes a professional email signature?

Article by: Exclaimer

Find out what you should include to make the best professional email signature for your organization.

Navigation Hover Effects with CSS Sprites

Video by: Sarah

In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items - Specify position: absolute and display: block…

HTML
CSS

Flexible Layouts

Video by: Mark

Learn how to create flexible layouts using relative units in CSS. New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).