Solved

setting colspan

Posted on 2003-10-28
5
858 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
  • 2
5 Comments
 
LVL 11

Expert Comment

by:Zontar
Comment Utility
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
Comment Utility
it didnt work :(
0
 
LVL 11

Accepted Solution

by:
Zontar earned 50 total points
Comment Utility
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
Comment Utility
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

How to improve team productivity

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

Join & Write a Comment

Suggested Solutions

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

771 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now