Jump to content


Photo

Adding td and image help


  • Please log in to reply
11 replies to this topic

#1 freakus_maximus

freakus_maximus
  • Members
  • PipPipPip
  • Advanced Member
  • 177 posts

Posted 25 September 2006 - 06:41 PM

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:

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

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:

//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>";

Thank for any help you can provide.


#2 fenway

fenway
  • Staff Alumni
  • MySQL Si-Fu / PHP Resident Alien
  • 16,199 posts
  • LocationToronto, ON

Posted 25 September 2006 - 06:55 PM

What's wrong about it so far?
Seriously... if people don't start reading this before posting, I'm going to consider not answering at all.

#3 freakus_maximus

freakus_maximus
  • Members
  • PipPipPip
  • Advanced Member
  • 177 posts

Posted 25 September 2006 - 07:01 PM

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.

#4 fenway

fenway
  • Staff Alumni
  • MySQL Si-Fu / PHP Resident Alien
  • 16,199 posts
  • LocationToronto, ON

Posted 25 September 2006 - 08:50 PM

And does it appear in the innerHTML of this TD?
Seriously... if people don't start reading this before posting, I'm going to consider not answering at all.

#5 freakus_maximus

freakus_maximus
  • Members
  • PipPipPip
  • Advanced Member
  • 177 posts

Posted 25 September 2006 - 10:22 PM

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.

#6 fenway

fenway
  • Staff Alumni
  • MySQL Si-Fu / PHP Resident Alien
  • 16,199 posts
  • LocationToronto, ON

Posted 25 September 2006 - 10:35 PM

I see... well, post the HTML code with the relevant JS, I assume there's a onclick event handler somewhere.
Seriously... if people don't start reading this before posting, I'm going to consider not answering at all.

#7 freakus_maximus

freakus_maximus
  • Members
  • PipPipPip
  • Advanced Member
  • 177 posts

Posted 25 September 2006 - 11:36 PM

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;


The relevant html to call this is just:

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


#8 fenway

fenway
  • Staff Alumni
  • MySQL Si-Fu / PHP Resident Alien
  • 16,199 posts
  • LocationToronto, ON

Posted 26 September 2006 - 02:28 AM

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.
Seriously... if people don't start reading this before posting, I'm going to consider not answering at all.

#9 freakus_maximus

freakus_maximus
  • Members
  • PipPipPip
  • Advanced Member
  • 177 posts

Posted 26 September 2006 - 12:37 PM

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>


#10 fenway

fenway
  • Staff Alumni
  • MySQL Si-Fu / PHP Resident Alien
  • 16,199 posts
  • LocationToronto, ON

Posted 26 September 2006 - 06:07 PM

Well, a new row is being added properly now.
Seriously... if people don't start reading this before posting, I'm going to consider not answering at all.

#11 freakus_maximus

freakus_maximus
  • Members
  • PipPipPip
  • Advanced Member
  • 177 posts

Posted 26 September 2006 - 07:06 PM

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.

#12 fenway

fenway
  • Staff Alumni
  • MySQL Si-Fu / PHP Resident Alien
  • 16,199 posts
  • LocationToronto, ON

Posted 26 September 2006 - 07:25 PM

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.../logo_main.jpg");

And you seem to have no problems with creating new cells.
Seriously... if people don't start reading this before posting, I'm going to consider not answering at all.




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users