0

I am trying to add create an editable table in HTML. So, I need to add rows, when user clicks on a button. Here is the code I am using.

              //remove all old rows.
          while (summaryTableElement.firstChild) {
              summaryTableElement.removeChild(summaryTableElement.firstChild);
          }

          //add a new text area in the summary field.
          summaryTableElement.innerHTML = "<textarea id='summaryTextBox' value='' onblur='saveSummary()'> </textarea> ";

This code works fine on Chrome and Mozilla. But, IE doesn't allow editing innerHTML. This HTML will be displayed inside a VB form, so I have "browser" and "webbrowser" controls available. Both of those controls use IE engine, so this code does not work there.

I have tried using firstchild.innerHTML instead so that I am not editing table row directly, and even that gave me same error.

I tried using WebKitBrowser. But, that causes an exception on load. Apparently that control uses some old method, and the method is changed. So, that control is out of question too.

Now, I am confused as to how to solve this problem?

Edit:

I found the issue with WebKitBrowser. It was specific to x86, while my project was targeting both x64 and x86. Switching it to x86 for both, worked. Although, webkit browser do not take return key values. So, I have a new problem. Pressing enter does not create a new line in table cell, and instead passes the event to vb form.

Edit:

Okay, so I tried working further with WebKitBrowser. But, that control gives me accessviolatedexception. So, I am thinking about going back to using the default browser control, for now.

As for default control, I checked further. Apparently, code works fine in IE9 and above. But, vb.net control uses some weird JS engine. So, I am receiving error only in vb control.

Here is the complete code for reference:

      var summaryChanges = "";
  var isSummaryClickable = true;

  //creates a textbox for editing purpose and include the original summary data.
  function modifySummary(id) {
      var summaryTableElement;  //to get the table cells so that we can access the value
      var originalSummary = ""; //to hold the original summary while we create a text box
      var loopCounter = 0; 

      if (isSummaryClickable == true) {

          isSummaryClickable = false; //saves event spilling when clicked on the newly created textbox

          //get the summary table id saved.
          summaryTableElement = document.getElementById (id).childNodes.item(0);

          //add existing data to a string to save it for later.
          for (loopCounter = 0; loopCounter < summaryTableElement.childNodes.length; loopCounter++) {
              originalSummary = originalSummary + summaryTableElement.childNodes.item(loopCounter).childNodes.item(0).innerHTML + "\n";
          }

          //remove all old rows.
          while (summaryTableElement.firstChild) {
              summaryTableElement.removeChild(summaryTableElement.firstChild);
          }

          //add a new text area in the summary field.
          summaryTableElement.innerHTML = "<tr><td><textarea id='summaryTextBox' value='' onblur='saveSummary()'> </textarea></td></tr> ";

          //set the width of the textbox to allow easy modification
          document.getElementById("summaryTextBox").style.width = '600px';

          //add original summary text to the text area and set focus
          document.getElementById("summaryTextBox").value = originalSummary;
          document.getElementById("summaryTextBox").focus();
      }
  }

  // saves the updated summary data back to HTML
  function saveSummary()
  {
      var newHTML = "";
      var changesSummary;
      var changesSubString = new Array();
      var index = 0;
      var elementToUpdate;

      //get the summary table id saved.
      elementToUpdate = document.getElementById("SummaryData"); //.childNodes.item(0);

      //get changes from the textbox
      changesSummary = document.getElementById("summaryTextBox").value;

      //generate string array for separate lines from summaryChanges
      changesSubString = changesSummary.split("\n");

      //generate new HTML string for the summary fields
      //alert(changesSubString.length);
      for (index = 0; index < changesSubString.length; index++) {
          newHTML = newHTML + "<tr><td class='Text' style='padding-left: 4px;padding-bottom: 4px;' id='SummaryLine" + index + "'</td>" + changesSubString[index] + "</tr>"
      }

      //update the HTML to the element
      elementToUpdate.innerHTML = newHTML;

      //allow clicking on summary table
      isSummaryClickable = true;
  }


  function doNothing(id) {
      //empty function for future use

      return;
  }

  //this function is called from vb.net script to read the js variable.
  //do not change the function definition (name or parameters or return type)
  //any change will cause error in vb.net script
  function jsInvokedFunction() {
      var updatedHTML;  // to be used by vb.net invoked function to get updated body
      var testVariable = "test";
      updatedHTML = document.body.innerHTML.toString();

      return updatedHTML.toString();
  }

I receive an error at the start of the line summaryTableElement.innerHTML = " ";

It is possible I am missing some other error, but I couldn't find any.

11
  • innerHTML of table and many other elements is read-only in IE. What element is summaryTableElement?
    – Teemu
    Aug 27, 2014 at 4:16
  • It is a table inside a row of another table. That's why it is impossible to update it. I learnt that much from older questions. Trying to find a workaround now. Aug 27, 2014 at 5:03
  • 1
    Textarea is not a valid member of the table element. You should create a new row then add a TD into which you can add the textarea.
    – slebetman
    Aug 27, 2014 at 5:14
  • That's what I am doing. I am removing all the existing rows from the inner table. Then adding a text area in a new row in to the table. That part is actually well done, and working perfectly. I am able to create a text area on click. On losing focus, I am able to create rows based on no. of lines in the text area. So, that's well and good. Only problem is, to add the text area, I need to modify the innerHTML. That is not supported by IE. And shitty thing is, I have to use IE for Vb's browser control. Cuz, webkitbrowser control will just open up a whole pandora box of compatibility issues. Aug 27, 2014 at 5:26
  • 1
    Have you looked into jquery (jquery.com)? It makes HTML manipulation via javascript much easier. Can you alos elaborate on what you are trying to do, instead of how you are trying to achive it? There may be a much better way.
    – Jon P
    Aug 27, 2014 at 6:08

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.