add rows to table (some cell contain image)

[cat5ive]

Hi,

I have an asp page that contain rows of record. Some rows already contain data that I retreive from database. The rest of the row are blank. When user input all those empty rows and still need more rows, then he would click Add button.

I found sample for a input type text cell. But some of my cell contain image. Can someone provide sample for insert image cell?

sample for text cell

var cellRight = row.insertCell(1);
  var el = document.createElement('input');
  el.type = 'text';
  el.name = 'txtRow' + iteration;
  el.id = 'txtRow' + iteration;
  el.size = 40;

My row

 <tr>
	<!--each group contain vertical line(image),space(image), input box, space(image) -->	  
          <td bgcolor="#999999"><img src="images/1px_999999.gif" width="1" height="25" border="0"></td>
          <td><img src="images/spacer.gif" width="8" height="1" border="0"></td>	
		  <td width class="ver10pxblk"><input type="Text" name="XITEM<%=i%>" size="10" id="c1_<%=i%>" maxlength="10" value="<%=hts(i)%>" ></td>
		  <td><img src="images/spacer.gif" width="8" height="1" border="0"></td>
		 
		  <td bgcolor="#999999"><img src="images/1px_999999.gif" width="1" height="25" border="0"></td>
          <td><img src="images/spacer.gif" width="8" height="1" border="0"></td>
          <td class="ver10pxblk"><input type="Text" name="XNAME<%=i%>" size="15" id="c2_<%=i%>" maxlength="25" value="<%=cntryorigin(i)%>" ></td>
          <td><img src="images/spacer.gif" width="8" height="1" border="0"></td>

By the way, is there easier way to add the rows? I have total of almost 40 cells. It's going to be a lot of coding.
Something that similiar to clonenode but I want the input cells of the new rows to have its own name and id.

Thanks in advance

 

[BillyRayPreachersSon]

Take a look at my penultimate post in thread216-1574388 to see how to effectively clone table rows without looping over each cell manually.

As to how to insert an image, did you not try changing this:

var el = document.createElement('input');

to this:

var el = document.createElement('img');

?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[cat5ive]

Hi Dan,

I've little experence with web programming so please bear with me.

Isn't the clonenodes method copy everything from the previous row, including the text value of the cell? I want to add empty rows with its own name and id. For example if the first cell of my last row name is "col1_10" then on the new row that I add it should name "col1_11". Can I do that with clonenode?

For the image cell, I have to define the attributes too, right? Do I do something like this, for the cell below?

el.src = "images/1px_999999.gif"
el.bgcolor ="#999999"
el.width = "1"
 and so on...

<td bgcolor="#999999"><img src="images/1px_999999.gif" width="1" height="25" border="0"></td>

 

[BillyRayPreachersSon]

That code should work - although remember that 'el' is the image, so you probably don't want to set the bgcolor.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[cat5ive]

Hi,

What I'm trying to do here is adding 2 rows at a time. One row contain input boxes which I use insertrow method. The other row has one cell contain image of horizontal line so I use clonenode method. I'm having problem with the code in red. I got error message 'undefined' when I clicked on button to add more line. If I hardcode with numeric value then it came out no problem. Please help.

var tbl = document.getElementById('tbl');
     var lastRow = tbl.rows.length;
     // if there's no header row in the table, then iteration = lastRow + 1
     var iteration = lastRow;
     var row = tbl.insertRow(lastRow);
     var tbody = document.getElementById('tbl').getElementsByTagName("tbody")[[COLOR=red]iteration[/color]];
     document.getElementById('tbl').appendChild(tbody.cloneNode(true))

//row with horizontal line
  <tbody>
		 <tr><td bgcolor="#999999" colspan="37" ><img src="images/spacer.gif" width="1" height="1" border="0"></td></tr> 
          </tbody>
		  <tr>

 

[cat5ive]

Another question. How can I get the checkbox to center?
Here's what I have. I got check box but it doesn't align in the center.

var cell34 = row.insertCell(34);
     var c9 = document.createElement('input');
     c9.type = 'checkbox';
     c9.name = 'XDEL' + iteration;
[COLOR=red]	 c9.align = 'center';[/color]

	 cell34.appendChild(c9);


<td class="ver10pxblk" align="center"><input type="checkbox" name="XDEL<%=i%>" id="c9_<%=i%>" ></td>

 

[BillyRayPreachersSon]

The iteration error is presumably down to duff logic... You're counting the rows and them asking for the tbody with that index... shouldn't you be either counting the tbodies, or asking for a row with that index?

On the centring, do you mean horizontally, or vertically?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Tech Snippets & Info:

http://www.codecouch.com/

 

[cat5ive]

Hi,

('tbl').getElementsByTagName("tbody")[COLOR=red][][/color];

I thought what goes inside the [] is the row#. For example if my last row is 10 then my added row for input boxes is 11 and my added row for horizontal line is 12. If I do like below it works. Please help me out here.

('tbl').getElementsByTagName("tbody")[COLOR=red][11][/color];

For centering of the checkbox, I mean both. The box should be right in the middle of the cell.

 

[cat5ive]

got it to work now. Thank again Dan.