Jump to content

Adding td and image help


freakus_maximus

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

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.