Solved

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

Posted on 2011-02-15
4
528 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?
0
Comment
Question by:jwright9
  • 2
4 Comments
 
LVL 14

Accepted Solution

by:
Designbyonyx earned 333 total points
ID: 34901282
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

0
 
LVL 20

Assisted Solution

by:thehagman
thehagman earned 167 total points
ID: 34902071
... 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
0
 
LVL 14

Assisted Solution

by:Designbyonyx
Designbyonyx earned 333 total points
ID: 34902481
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

0
 
LVL 20

Expert Comment

by:Proculopsis
ID: 34905196

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

0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

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

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now