[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 922
  • Last Modified:

setting colspan

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
soft_techy
Asked:
soft_techy
  • 2
1 Solution
 
ZontarCommented:
Try

mycell1.colspan="2";

or

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

All attribute values set via DOM are strings and therefore must be quoted.
0
 
soft_techyAuthor Commented:
it didnt work :(
0
 
ZontarCommented:
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
 
jaysolomonCommented:
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

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now