Adding td and image help

[freakus_maximus]

Having problems adding to existing code.

I have a small javascript that allows me to add a checkbox and text area for input with the click of a "add task" link. All that works fine, but I am trying to get now wrap all this inside my layout and having some problems.

I know I need to create a new td entry and reference an image, just do not know how. Straight html for this looks like this:

[code]<td class='bodyleft'><img src='/mysite/images/disp_left.gif' width='3' height='1' alt='' style='display: block;' /></td>[/code]

But unsure how to get this referenced properly in javascript (not my strongpoint at all).

I know it's wrong but here is what I have so far:

[code]//create left display
  var cell = row.insertCell(0);
  var disp_left = document.createElement("image");
  disp_left.setAttribute("class", "bodyleft");
  cell.appendchild = "<img src='/mysite/images/disp_left.gif' width='3' height='1' alt='' style='display: block;' /></td>";[/code]

Thank for any help you can provide.

[fenway]

What's wrong about it so far?

[freakus_maximus]

It does not appear that the new td is created, even though the additional checkbox and textarea are created.

The image that should appear is not there as well.

[fenway]

And does it appear in the innerHTML of this TD?

[freakus_maximus]

sorry, I meant it is NOT being created. Obviously my code is wrong. Not sure what is the right way to achieve this.

I am not that good with javascript, did search the net, but could not find anything in reference to created td's like this. And the references I looked up on google didnt appear to show a table or cell type function.

Probably I just dont know what to search for.

[fenway]

I see... well, post the HTML code with the relevant JS, I assume there's a onclick event handler somewhere.

[freakus_maximus]

You can see what I started to add and have been trying to get to work. Maybe the td creation is right and the imgsrc is what I do not know how to setup...lol...been trying all day to figure out.

Here's the javascript:

var numrows = 1;
function drawoptions()
{
  var tbl = document.getElementById("task_tbl");
  var targetnumrows = parseInt(document.getElementById("numoptions").value + "");
  if(targetnumrows > numrows)
  {
      for(var i=0; i<targetnumrows - numrows; i++)
      {
          var row = tbl.insertRow(tbl.rows.length);

          // THIS IS THE NEW CODE I CANNOT GET WORKING
          // create the new left side display cell
          var cell = row.insertCell(0)
          cell.setAttribute('class','bodyleft')




          // create the checkbox cell
          var cell = row.insertCell(1);
          var checkboxfield = document.createElement("input");
          checkboxfield.setAttribute("type", "checkbox");
          checkboxfield.setAttribute("id", "Checkbox[" + (numrows+i) + "]");
          checkboxfield.setAttribute("name", "Checkbox[" + (numrows+i) + "]");
          cell.appendChild(checkboxfield);
          cell.setAttribute('align','center');

 
          // create the textarea cell
          cell = row.insertCell(2);
          var tdescfield = document.createElement("textarea");
          tdescfield.setAttribute("cols", "60");
          tdescfield.setAttribute("rows", "3");
          tdescfield.setAttribute("id", "Tdescr[" + (numrows+i) + "]");
          tdescfield.setAttribute("name", "Tdescr[" + (numrows+i) +"]");       
          cell.appendChild(tdescfield);
      }
  }
  // they've decided to show less rows, so we remove some
  else
  {
      for(var i=0; i<numrows - targetnumrows; i++)
      {
          tbl.deleteRow(tbl.rows.length - 1);
      }
  }

  numrows = tbl.rows.length - 1;
  document.getElementById("numoptions").value=tbl.rows.length; 
  //alert(numrows);
}

window.onload = drawoptions;


[b]The relevant html to call this is just:[/b]

<a align="center" href="javascript:drawoptions();">add task</a>

[fenway]

I've never seen .insertRow or any of the other related functions... by I don't see any HTML code with the specified IDs, either.

[freakus_maximus]

OK, here's the original code before i modified for my use, all you have to do is save it as an html page and call it up. You will see how it works.

Everything functions as it should, no issues with the script.

What I cannot figure out is:

1. how to add a new cell before the "//create the name cell" (I may have this part figured out, if my previous example was right, I just dont know).

2. how to insert a "<img src=..." tag into the newly created cell.


var numrows = 0;
function drawoptions()
{
  var tbl = document.getElementById("formtable");
  var targetnumrows = parseInt(document.getElementById("numoptions").value + "");
  // if they've selected to show more rows, then we add more rows
  if(targetnumrows > numrows)
  {
      for(var i=0; i<targetnumrows - numrows; i++)
      {
          var row = tbl.insertRow(tbl.rows.length);

          // create the name cell
          var cell = row.insertCell(0);
          var namefield = document.createElement("input");
          namefield.setAttribute("type", "text");
          namefield.setAttribute("id", "Name" + (numrows+i));
          namefield.setAttribute("value", "field id : Name" + (numrows+i));
          cell.appendChild(namefield);
 
          // create the email cell
          cell = row.insertCell(1);
          var emailfield = document.createElement("input");
          emailfield.setAttribute("type", "text");
          emailfield.setAttribute("id", "Email" + (numrows+i));
          emailfield.setAttribute("value", "field id : Email" + (numrows+i));
          cell.appendChild(emailfield);
      }
  }
  // they've decided to show less rows, so we remove some
  else
  {
      for(var i=0; i<numrows - targetnumrows; i++)
      {
          tbl.deleteRow(tbl.rows.length - 1);
      }
  }

  numrows = tbl.rows.length - 1;
  document.getElementById("numoptions").value=tbl.rows.length; 
  //alert(numrows);
}

window.onload = drawoptions;

</script>
</head>

<body>

<form method="post" action="someformhandler.aspx">
Enter your friends names and email addresses


Show
<input type='hidden'  id="numoptions" value=1>
<table id="formtable">
<tr><td colspan=2><a href="javascript:drawoptions();">add</td></tr>
<tr>
  <td>Name</td>
  <td>Email</td>     
</tr>
</table>

<input type="submit" value="Save"  />

</form>

[fenway]

Well, a new row is being added properly now.

[freakus_maximus]

The problem was never with adding a new row. That all works fine.

What I cannot figure out is how to add a new cell and how to insert a "<img src=..." tag into the newly created cell.

[fenway]

Sorry, I misunderstood.

You should simply be able to make a new IMG element:

var imgfield = document.createElement("img");
imgfield.setAttribute("src", "http://www.phpfreaks.com/images/logo_main.jpg");

And you seem to have no problems with creating new cells.