How do I change innerHTML on a particular row's ce

DoTheLoop · August 23rd, 2004, 07:03 AM

Hia!

I have a question about tables and changing the contents of a particular row inside that table.

Something like this:
<table id=mytable>
  <tr>
    <td><input type=button name=foo value=click onclick=javascript:changethisrow(andthesecells);></td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>

What I want to put into those particular cells looks something like this:
<tr>
  <td><input type=text name=something_unique value=foo></td>
  <td><input type=text name=something_unique value=foo></td>
  <td><input type=text name=something_unique value=foo></td>
  <td><input type=text name=something_unique value=foo></td>
</tr>

Thanks in advance

Regards
DoTheLoop

joefawcett · August 23rd, 2004, 10:05 AM

This may help you get started:

Code:

<html>
<head>
<title>Table Editor</title>
<script type="text/javascript">
function makeRowEditable(Row)
{
  var iRowIndex = Row.rowIndex;
  for (var i = 1; i < Row.cells.length; i++)
  {
    var oCell = Row.cells[i];
    var sNewName = "txt_R" + iRowIndex + "_C" + i; 
    makeCellEditable(oCell, sNewName, oCell.innerText);  //Change second parameter to something else if you want different value in textbox.
  }
}

function makeCellEditable(Cell, NewName, InitialValue)
{  
  var oInput = document.createElement("<input name=\"" + NewName + "\" type=\"text\">");
  oInput.value = InitialValue;
  oInput.size = 3;
  Cell.removeChild(Cell.childNodes[0]);
  Cell.appendChild(oInput);  
}

</script>
</head>
<body>

<table size="80%" align="center">
  <tbody>
    <tr>
      <td width="40%"><input type="button" value="Edit Row" onclick="makeRowEditable(this.parentElement.parentElement);"></td> 
      <td width="20%">1</td>
      <td width="20%">2</td>
      <td width="20%">3</td>
    </tr>
    <tr>
      <td><input type="button" value="Edit Row" onclick="makeRowEditable(this.parentElement.parentElement);"></td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </tbody>
</table>
</body>
</html>

--

Joe (Co-author Beginning XML, 3rd edition)

DoTheLoop · August 23rd, 2004, 10:34 AM

Thanks a bunch.

Real neat and tidy.

Regards
DoTheLoop