Placing a div inside a table 2

[Graeme06]

Hi, I'm not sure exactly where to place this since it sort of spans HTML, CSS, Javascript, and PHP; but since AJAX is basically based around Javascript, I'll try here:

So my problem is that I want to use AJAX to update cells of a table. Basically I have a table with 15 columns and 3 rows. What I want to do is update a single row of a table, excluding the first cell, so what I did was some code like
<tr>
<td>cell1</td>
<div id="row1">
<td>cell2</td>
(repeat 13 more times for cells 3 - 15)
</div>
</tr>

So then to change these cells, I use AJAX to set the innerHTML of the div "row1" to
<td>cell2 new data</td>
(repeat for remaining 13cells)

However, this doesn't work. It places the code above the table. Is there a better way I can dynamically update cells of a table without completely rewriting the table?

Thanks,
Graeme

 

[Lowet]

First of all you cannot have cells in a DIV section. You could have them in a THEAD section - if you use MSIE..

I use to add or replace cells instead with the DOM.

var tbl,row,cell;
tbl = document.getElementById('mytable');
   for (var i=0; i<3; i++)  [green]//  For each row (3)[/green]
   {
   row = tbl.insertRow();
      for (ii=0; ii<15; ii++)  [green]//  For each row (15)[/green]
      {
      cell = row.insertCell();
      cell.innerHTML = 'Row '+i+', cell '+ii;
      }
   }

If you just want to change the content in the cells use this:

var tbl = document.getElementById('mytable');
tbl.rows([navy]any_row_index[/navy]).cells([navy]any_cell_index[/navy]).innerHTML = 'Whatever HTML';

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]

 

[yngjzy12]

Hey, to me it looks like your div is not actually inside anything. In other words, I think the only thing you can place in a table row is a table cell but I may be wrong on that. Now, I think there is two possible solutions. One is you could span the td 13 cells, and return a table to put in that cell.

<tr>
  <td>cell1</td>
     <td>
       <div id="row1"></div>
     </td>
</tr>

The other solution, which I think is probably the better one is to use the DOM to edit the cells.

<script>
   /* get array of all rows in the table */
   var rows = document.getElementById('tableName').rows;

  /* now you can access the cells in each */
  var cells = rows[0].cells;

  cells[1] = data;
  cells[2] = data2;
</script>

Check

http://developer.mozilla.org/en/docs/Gecko_DOM_Reference

for a complete overview of the DOM and it's methods and properties.

 

[Lowet]

Hey yngjzy12, it was what I wrote..
And it's better to access the cell itself with DOM instead of placing a DIV in every single cell...

And what would this data be??

cells[1] = data;

the cell itself cannot be set. And as he said, Graeme06, he uses the AJAX so he has no objects but only a textstring..

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]

 

[yngjzy12]

Hey Lowet, we must have posted at the same time as I did not see your post. Your absolutely right cell[1] would not do anything.

cell[index].appendChild()

is what I meant. I just tested your code in Firefox and I got an error. I believe when you call the insertRow and insertCell methods you must specifiy an index.

var row = HTMLTableElement.insertRow(index);

If index is -1 or equal to the number of rows, the row is appended as the last row. If index is omitted or greater than the number of rows, an error will result.

as specified from

http://developer.mozilla.org/en/docs/DOM:table.insertRow

 

[Lowet]

Yes I see, it happens
You're right about the index, I was just in a hurry because I was on my way out to party Now I'm back..
I use to use [tt]row.insertCell(row.cells.length)[/tt] but didn't write it here..
However, I hope Graeme06 got the point about the table DOM.

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]

 

[Graeme06]

Thanks to the above posters. Those solutions were excellent and I got it working. Thanks again.

But instead of starting a separate thread, can I ask one more thing?

All I want to do is get the "name" value of the selected option in a list. Basically I want code like:
document.getElementById('select1').selectedIndex.name

Except the .name doesn't seem to work (not that it should - I just guessed it). Does anyone know the correct function to use there?

Thanks,
Graeme

 

[Lowet]

The [tt].selectedIndex[/tt] only gets the OPTION index not the object itself.
To access the option which is seleced in a SELECT use this:

var opt = document.getElementById('select1').options[document.getElementById('select1').selectedIndex];

or

var sel = document.getElementById('select1'); [green]// The SELECT[/green]
var opt = sel.options[sel.selectedIndex]; [green]// The OPTION[/green]

Summary:

[green]// Get the SELECT object[/green]
var sel = document.getElementById('select1');

[green]// Get the OPTION value[/green]
var val = sel.options[sel.selectedIndex].value;

[green]// Get the OPTION value[/green]
var txt = sel.options[sel.selectedIndex].text;

I hope you got it.

- Lowet

[gray]Why can't all browsers parse pages the same way? It should be the Web designer who decides how to display the content, not the browser![/gray]