asked on

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

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?

ASKER CERTIFIED SOLUTION

Designbyonyx

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Member_2_4694817

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

SOLUTION

Designbyonyx

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Proculopsis

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