Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1218
  • Last Modified:

Update contents of a <tr> element using innerHTML

Hey guys,

I have a table I am generating, for each row I am currently also generating a form in another row with the same values. These two rows can be "toggled" between which means the "display" row is toggled off and the "edit" row is toggled on.

Generating a seperate form for each row was placing unnecessary load on the server so I wrote a function which generates the HTML source code for the "editing" form based on arguments passed to it, now the problem comes where I need to insert this generated code into the "edit" row.

I am aware of the problems associated with using innerHTML directly on <tr> elements in IE and had a solution which worked temporarily but now does not.

The javascript I am using is so:

      var tableEdit = document.getElementById("tableEdit" + id);
      try {
            tableEdit.innerHTML = tableEditHTML;
      }
      catch (e) {
              // IE fails unless we wrap the string in another element.
              var wrappingDiv = document.createElement('div');
            wrappingDiv.innerHTML = tableEditHTML;
              tableEdit.appendChild(wrappingDiv);
      }

This is being used on the following HTML:

      <table>
            <tr id="tableEdit'.$r['id'].'" class="toggleHide rowEdit">
            </tr>
      </table>

Note: The variable "tableEditHTML" contains <td> tags and when the function is called to populate the "tableEdit" row with HTML so is a function which switches the data display with the data editing rows.

The code works in Firefox but not in IE. I have verified that "tableEditHTML" is actually true.
0
shaggy_the_sheep
Asked:
shaggy_the_sheep
1 Solution
 
devicCommented:
hi shaggy_the_sheep, you can not use tr.innerHTML, so your tableEditHTML should be without <td>

here is an example what can you do:
=============================
<script>
function setMyHTML(curId)
{
      var tableEditHTML = "<b>hello</b> world!"
      var row = document.getElementById("tableEdit" + curId);
      if(row)
      {
            while(row.cells.length>0)
            {
                  row.deleteCell(0);
            }
            
            var cell = row.insertCell(0);
            cell.innerHTML = tableEditHTML;
      }
}
</script>
 <table border=1>
          <tr id="tableEdit5" class="toggleHide rowEdit">
          </tr>
 </table>
<button onclick="setMyHTML(5)">setMyHTML</button>
0
 
shaggy_the_sheepAuthor Commented:
Aaaah perfect! Thanks
0

Featured Post

[Webinar] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now