[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

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

writing table rows with innerText, innerHTML, or document.write

Is it possible to have javascript write table rows using either innerText, innerHTML, or document.write?

I have a html table that i want to fill up whenever a button is clicked. Here is my code:

<script language='javascript'>
function add_it()
{
  document.getElementById('some_data').innerHTML += "<tr><td>test</td></tr>";
}
</script>

<br>
<img src='test.gif' onClick='add_it();'>
<br>

<table>
<span id='some_data'></span>
</table>

I know I can just write the <table></table> tags in the add_it function but I do not want to do that. Any ideas? Thanks.
0
skiboy825
Asked:
skiboy825
  • 4
  • 4
1 Solution
 
StormyWatersCommented:
You should be using the DOM. Consider a document to be a tree of elements, not a string of text that happens to have <> around it.

<script language="Javascript">
function addIt() {
  var table = document.createElement('table');
  var row = document.createElement('tr');
  var column = document.createElement('td');
  var text = document.createTextNode('test');
  table.appendChild(row)
    .appendChild(column)
        .appendChild(text);
  table.setAttribute('border','1')
  document.getElementsByTagName('body')[0].appendChild(table);
}
 
 
</script>
0
 
StormyWatersCommented:
Misread what you want slightly. This will add a row when someone clicks the button.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="Javascript">
function addIt() {
  var table = document.getElementById('data');
  var row = document.createElement('tr');
  var column = document.createElement('td');
  var text = document.createTextNode('test');
  table.appendChild(row)
    .appendChild(column)
        .appendChild(text);
}
 
 
</script>
</head>

<body>
<button name="add" onClick="addIt()">Add stuff!</button>
<table id="data">
<tr><td>Stuff will be added here!</td></tr>
</table>
</body>
</html>
0
 
skiboy825Author Commented:
Thank you, that seems to work, although only in Netscape.
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
skiboy825Author Commented:
I need it to work in borth browsers.
0
 
GwynforWebCommented:
this is cross browser

<script language="javascript">
function addRow(aTable) {
   aRow = aTable.insertRow(aTable.rows.length);
   aCell = aRow.insertCell(0);
   aCell.innerHTML = "A";
   aCell = aRow.insertCell(1);
   aCell.innerHTML = "Data";
}
</script>

<table id="myTable" name="myTable" border="1">
<tbody id="myTableTBody" name="myTableTBody">
  <tr>
    <td>Row 1</td>
    <td>data</td>
  </tr>
  <tr>
    <td>Row 2</td>
    <td>data</td>
  </tr>
  <tr>
    <td>Row 3</td>
    <td>data</td>
  </tr>
</tbody>
</table>

<p><input type="button" value="add row" id="addRow" onClick="addRow(document.getElementById('myTableTBody'))">
0
 
skiboy825Author Commented:
thank you.  i also figured that adding 'tbody' to StormyWaters' solution also works.

function addIt()
{
  var table = document.getElementById('data');
  var tbody = document.createElement("TBODY");
  var row = document.createElement('tr');
  var column = document.createElement('td');
  var text = document.createTextNode('test');
  table.appendChild(tbody).appendChild(row).appendChild(column).appendChild(text);
}

<body>
<button name="add" onClick="addIt()">Add stuff!</button>
<table id="data">
<tbody>
<tr><td>Stuff will be added here!</td></tr>
</tbody>
</table>
</body>
</html>
0
 
StormyWatersCommented:
So you didn't split the points because...?
0
 
StormyWatersCommented:
PS, I'm sorry I didn't reply sooner, I was eating dinner.
0
 
skiboy825Author Commented:
sorry, i don't know how to split points.  i just accepted gwyn's answer, and thought there would be an option to give you the assist.
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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