make table row editable 1

[Tracey]

Hi all. Hope your week is going well so far.

I have a table which is dynamically filled by isapi/cgi with values from a Db.

Each row of the table is to have an "edit" button, which is to allow that row to become editable (the button would then become a "save" button). I have found the following code which will set a table cell to be editable on click of the cell, and i would like to "tweak" it to do what i need. (ie pass the <tr> as "this" and loop through <td>'s???)

function editCell (cell) {
  if (document.all) {
    cell.innerHTML =
      '<INPUT ' +
      ' ID="editCell"' +
      ' ONCLICK="event.cancelBubble = true;"' + 
      ' ONCHANGE="setCell(this.parentElement, this.value)" ' +
      ' ONBLUR="setCell(this.parentElement, this.value)" ' +
      ' VALUE="' + cell.innerText + '"' +
      ' class="medtext"' +
      '>';
    document.all.editCell.focus();
    document.all.editCell.select();
  }
  else if (document.getElementById) {
    cell.normalize();
    var input = document.createElement('INPUT');
    input.setAttribute('value', cell.firstChild.nodeValue);
    input.setAttribute('size', cell.firstChild.nodeValue.length);
    input.onchange = function (evt) { setCell(this.parentNode, 
this.value); };
    input.onclick = function (evt) { 
      evt.cancelBubble = true;
      if (evt.stopPropagation)
        evt.stopPropagation();
    };
    cell.replaceChild(input, cell.firstChild);
    input.focus();
    input.select();
  }
}
function setCell (cell, value) {
  if (document.all)
    cell.innerText = value;
  else if (document.getElementById)
    cell.replaceChild(document.createTextNode(value), cell.firstChild);
}

cheers guys

Tracey

Tracey
Remember... True happiness is not getting what you want...

Its wanting what you have got!

 

[chessbot]

function eachCell(row)
{  
  var curr;
  // The while loop iterates through the children of row.
  while (curr != row.lastChild)
  {
    curr = (curr == null) ? row.firstChild : curr.nextSibling;
    editCell(curr);
  }
  // Do anything else
}

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five

 

[Tracey]

dumb question now... how do i pass the row to the function from a button in <td>?

Tracey
Remember... True happiness is not getting what you want...

Its wanting what you have got!

 

[chessbot]

What is your button tag?

If you are using [tt]<button>A button</button>[/tt], use:

<tr><!-- your row -->
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td><button onClick="eachCell(this.parentElement.parentElement);">Edit</button></td>
</tr>

this refers to the button. each parentElement goes one step up, so parent is the td, then the tr.

I am not sure what the code is if you are using <input type="button">.

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five

 

[chessbot]

Update:

This works fine with <input type="button"> tags.

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five

 

[Tracey]

yipeee!! it works with <input type=button> too

you have earned your star chessbot.

(i wont tell you that the "design team" just now decided we dont need that functionality after all - i'm sure i will need it later...)

Tracey
Remember... True happiness is not getting what you want...

Its wanting what you have got!

 

[chessbot]

That makes me feel really helpful...

Thanks for the star! (By the way, I knew nothing about element transversing before this thread )

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five

 

[Tracey]

just one problem with it.. its not firefox (mozilla) compatible... firefox error says
Error: this.parentElement has no properties

but i guess i will cross that bridge later.....


Tracey
Remember... True happiness is not getting what you want...

Its wanting what you have got!

 

[chessbot]

If you ever actually need the code, come back to the forum.

--Chessbot

"So it goes."
Kurt Vonnegut, Slaughterhouse Five

 

[Tracey]

dont worry, i think i will be practically living here for a month or so.....



Tracey
Remember... True happiness is not getting what you want...

Its wanting what you have got!