Solved

setting colspan

Posted on 2003-10-28
5
907 Views
Last Modified: 2012-06-22
In my following code i have button upon clicking which a row should be added on top. bottom rows have 4 cells in each, i want 3 cells in top row, and middle one should have colspan of 2.

i created "TD" and tried to set colspan as mycell.colspan=2;  its not working can someone help me trying to fix this

<%@ page language="java" %>
<html>
<head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html;">
        <script type="text/javascript" language="JavaScript1.2" >

 function populate()
 {
  var mycell;
 
  var tab = document.getElementById("myTable").firstChild;
 
   mycell = document.createElement("TD");
   
   mycell.colspan=2;
   input = document.createElement("INPUT");
   input.type="text";
   input.value="111";

 mycell1 = document.createElement("TD");
   
   mycell1.colspan=2;
   input1 = document.createElement("INPUT");
   input1.type="text";
   input1.value="111";
   

   mycell.appendChild(input);
mycell1.appendChild(input1);

   

   tab.childNodes[0].appendChild(mycell);
       tab.childNodes[0].appendChild(mycell1);
 

 }
        </script>

</head>
<body bgcolor="#F8F8F8" leftmargin="0" rightmargin="0"
marginwidth="0" marginheight="0" topmargin="0" >


<table id="myTable">
 <tr>

  <td><input type='text' value='111'></td>
 </tr>
 <tr>
  <td><input type='text' value='xyz'></td>
  <td><input type='text' value='xyz'></td>
  <td><input type='text' value='xyz'></td>
  <td><input type='text' value='xyz'></td>

 </tr>
 <tr>
  <td><input type='text' value='abc'></td>
  <td><input type='text' value='abc'></td>
  <td><input type='text' value='abc'></td>
  <td><input type='text' value='abc'></td>

 </tr>

</table>
<input type=button onclick="populate()" value=addRowOnTop>
</body>

</html>


Thanks in advance
0
Comment
Question by:soft_techy
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
5 Comments
 
LVL 11

Expert Comment

by:Zontar
ID: 9639054
Try

mycell1.colspan="2";

or

mycell1.setAttribute("colspan", "2");

All attribute values set via DOM are strings and therefore must be quoted.
0
 
LVL 1

Author Comment

by:soft_techy
ID: 9639088
it didnt work :(
0
 
LVL 11

Accepted Solution

by:
Zontar earned 50 total points
ID: 9639547
That's because

var tab = document.getElementById("myTable").firstChild;

isn't what you think it is: MSIE returns a tbody element and Mozilla returns a text node (the linefeed in the HTML source). MSIE tends to ignore text nodes occurring between tags and not containing anything other than whitespace characters. (NB: Both browsers conform to the rule in HTML-DOM that says that even if you don't put a tbody in your table, the DOM parser's supposed to assume there's a tbody element node there anyway.)

The case is similar with regard to tab.childNodes[0]: MSIE returns a tr (the first child element of the tbody), and Mozilla returns null (a text node can't have any children).

If you're going to use nodes, you have to be very careful to test to see what type the node actually is before you try to do anything with it. Fortunately, HTML DOM has some convenience methods for dealing with table elements. Try this instead:

function populate()
{
  var myTable = document.getElementById("myTable");
  var newRow = myTable.insertRow(0);

  var newCell = newRow.insertCell(0);  
  newCell.colspan = "2";

  var input = document.createElement("input");
  input.type="text";
  input.value="111";

  newCell.appendChild(input);

//

  newCell = newRow.insertCell(1);  
  newCell.colspan = "2";

  input = document.createElement("input");
  input.type="text";
  input.value="222";
  newCell.appendChild(input);
}

You could also use cloneNode() to get a copy of the first cell after you insert the text input, then insert both the original cell and the copy into the row: replace everything after the // in the function with

var secondCell = newCell.cloneNode(true);
newRow.appendChild(secondCell);

However, there appears to be a bug in Mozilla whereby the value of the input doesn't get copied.

**shuffles off to Bugzilla to see what's up with that...
0
 
LVL 16

Expert Comment

by:jaysolomon
ID: 10346183
No comment has been added lately, so it's time to clean up this TA.
I will leave the following recommendation for this question in the Cleanup topic area:

Accept: Zontar {http:#9639547}

Please leave any comments here within the next four days.
PLEASE DO NOT ACCEPT THIS COMMENT AS AN ANSWER!

jAy
EE Cleanup Volunteer
0

Featured Post

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

695 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question