Jump to content

Archived

This topic is now archived and is closed to further replies.

freakus_maximus

Adding td and image help

Recommended Posts

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.

Share this post


Link to post
Share on other sites
What's wrong about it so far?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
And does it appear in the innerHTML of this TD?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
I see... well, post the HTML code with the relevant JS, I assume there's a onclick event handler somewhere.

Share this post


Link to post
Share on other sites
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>

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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>

Share this post


Link to post
Share on other sites
Well, a new row is being added properly now.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.