Solved

Change Rowspan using javascript

Posted on 2003-11-13
10
9,884 Views
Last Modified: 2013-11-19
How do you change the rowspan property of a table cell using javascript?
0
Comment
Question by:trizzag
[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
  • 5
  • 4
10 Comments
 
LVL 11

Expert Comment

by:Zontar
ID: 9743388
tdObj.rowSpan = "3";  //  capital "S"

or

tdObj.setAttribute("rowspan", "3");  //  lowercase "s"

where

tdObj is a DOM reference to the TD element.
0
 
LVL 10

Expert Comment

by:NetGroove
ID: 9743398
Like this:

<html>
<head>
<script>
function change(){
  tb = document.getElementsByTagName('table')[0].firstChild;
  td = tb.rows[1].cells[0];
  td.colSpan=3;
}
</script>
</head>
<body>
<table border=1>
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td><center>1</center></td></tr>
<tr><td>A</td><td>B</td><td>C</td></tr>
</table>
<form>
<input type=button value=Change
onClick="change()">
</form>
</body>
</html>


0
 
LVL 25

Expert Comment

by:devic
ID: 9743413
hi trizzag,

here is two ways:

==================================
<table border=1 width=300 height=300>
<tr id=myrow>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
</tr>
</table>

<script>
function changeRowColor()
{
      var myRow=document.getElementById("myrow");
      myRow.bgColor="red";
}
</script>
<button onclick=changeRowColor()>change Row Color to red</button>



<script>
function changeRowColor2()
{
      var myRow=document.getElementById("myrow");
      myRow.setAttribute("bgColor","blue");
}
</script>
<button onclick=changeRowColor2()>change Row Color to blue</button>
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 11

Expert Comment

by:Zontar
ID: 9743512
NetGroove: He said rowspan, not colspan.

devic: He said rowspan, not row colour.

Please read the question again.
0
 
LVL 25

Expert Comment

by:devic
ID: 9743546
@Zontar you are right!

but is same way ;)

================================
<table border=1 width=300 height=300>
<tr>
      <td id=mytd>&nbsp;</td>
      <td>&nbsp;</td>
</tr>
<tr>
      <td>&nbsp;</td>
</tr>
</table>

<script>
function changeRowColor()
{
      var myTD=document.getElementById("mytd");
      myTD.rowSpan="2";
}
</script>
<button onclick=changeRowColor()>change Row Color to red</button>



<script>
function changeRowColor2()
{
      var myTD=document.getElementById("mytd");
      myTD.setAttribute("rowSpan","1");
}
</script>
<button onclick=changeRowColor2()>change Row Color to blue</button>
0
 
LVL 25

Expert Comment

by:devic
ID: 9743551
with right buttons values ;)

=======================================
<table border=1 width=300 height=300>
<tr>
      <td id=mytd>&nbsp;</td>
      <td>&nbsp;</td>
</tr>
<tr>
      <td>&nbsp;</td>
</tr>
</table>

<script>
function changeRowColor()
{
      var myTD=document.getElementById("mytd");
      myTD.rowSpan="2";
}
</script>
<button onclick=changeRowColor()>change mytd rowspan to 2</button>



<script>
function changeRowColor2()
{
      var myTD=document.getElementById("mytd");
      myTD.setAttribute("rowSpan","1");
}
</script>
<button onclick=changeRowColor2()>change mytd rowspan to 1</button>
0
 
LVL 25

Expert Comment

by:devic
ID: 9743564
@ Zontar

rowspan and rowSpan is not the same ;)
0
 
LVL 11

Accepted Solution

by:
Zontar earned 125 total points
ID: 9744495
> rowspan and rowSpan is not the same

I'm aware of this, which is why I pointed out the difference in usage.

Attribute name: rowspan
Property name: rowSpan

Just as I said:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Add & Delete Cells / Change Colspan Example</title>

<style type="text/css">
  body {font-size:1.5em;}
  p {cursor:pointer; margin:.45em;}
  p:hover {color:red;}
</style>

<script type="text/javascript">

function changeSpan(upOrDown)
{
  var tblMain = document.getElementById("tblmain");
  var firstRow = tblMain.getElementsByTagName("tr")[0];
  var firstCell = firstRow.getElementsByTagName("th")[0];

  currRowSpan = firstCell.getAttribute("rowspan") - 0; //  "rowspan" with a lowercase "s" when used with getAttribute() or setAttribute()

  if(upOrDown == 1)
    firstCell.rowSpan = (currRowSpan + 1) + "";  //  "rowSpan" with a capital "S" when accessed directly as a property
  else
    firstCell.rowSpan = (currRowSpan - 1) + "";
}

function removeCell(row, cell)
{
  row.removeChild(cell);
}

function remove()
{
  var tbody = document.getElementById("tblmain").getElementsByTagName("tbody")[0];
  var rows = tbody.getElementsByTagName("tr");

  if(rows.length == 1)
  {
    alert("That's the last row there, matey.\nDon't be a mongchop.");
    return;
  }

  var row = rows[rows.length - 1];

  tbody.removeChild(row);
  changeSpan(0);
}

function add()
{
  var tbody = document.getElementById("tblmain").getElementsByTagName("tbody")[0];
  var rows = tbody.getElementsByTagName("tr");

  var newRow = document.createElement("tr");
  var newCell = document.createElement("td");
  newCell.appendChild( document.createTextNode(rows.length + 1 + "") );

  newRow.appendChild(newCell);
  tbody.appendChild(newRow);
  changeSpan(1);
}

window.onload
  = function()
    {
      document.getElementById("addP").onclick = add;
      document.getElementById("removeP").onclick = remove;
    };

</script>

</head>
<body>

<table border="1" id="tblmain" cellpadding="5" cellspacing="0">
  <tbody>
    <tr>
      <th rowspan="8">Header</th><td>1</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
    </tr>
    <tr>
      <td>8</td>
    </tr>
  </tbody>
</table>
<p id="addP">Click here to add.</p>
<p id="removeP">Click here to remove.</p>

</body>
</html>
0
 
LVL 11

Expert Comment

by:Zontar
ID: 9744521
Oh, stupid bloody MSIE...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Add & Delete Cells / Change Colspan Example</title>

<style type="text/css">
  body {font-size:1.5em;}
  p {cursor:pointer; margin:.45em;}
  p:hover {color:red;}
</style>

<script type="text/javascript">

function changeSpan(upOrDown)
{
  var tblMain = document.getElementById("tblmain");
  var firstRow = tblMain.getElementsByTagName("tr")[0];
  var firstCell = firstRow.getElementsByTagName("th")[0];

  currRowSpan = firstCell.getAttribute("rowspan") - 0;

  if(upOrDown == 1)
    firstCell.rowSpan = (currRowSpan + 1) + "";
  else
    firstCell.rowSpan = (currRowSpan - 1) + "";
}

function remove()
{
  var tbody = document.getElementById("tblmain").getElementsByTagName("tbody")[0];
  var rows = tbody.getElementsByTagName("tr");

  if(rows.length == 1)
  {
    alert("That's the last row there, matey.\nDon't be a mongchop.");
    return;
  }

  var row = rows[rows.length - 1];
  changeSpan(0);

  tbody.removeChild(row);
}

function add()
{
  var tbody = document.getElementById("tblmain").getElementsByTagName("tbody")[0];
  var rows = tbody.getElementsByTagName("tr");

  var newRow = document.createElement("tr");
  var newCell = document.createElement("td");
  newCell.appendChild( document.createTextNode(rows.length + 1 + "") );

  newRow.appendChild(newCell);
  tbody.appendChild(newRow);
  changeSpan(1);
}

window.onload
  = function()
    {
      document.getElementById("addP").onclick = add;
      document.getElementById("removeP").onclick = remove;
    };

</script>

</head>
<body>

<table border="1" id="tblmain" cellpadding="5" cellspacing="0">
  <tbody>
    <tr>
      <th rowspan="8">Header</th><td>1</td>
    </tr>
    <tr>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
    </tr>
    <tr>
      <td>5</td>
    </tr>
    <tr>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
    </tr>
    <tr>
      <td>8</td>
    </tr>
  </tbody>
</table>
<p id="addP">Click here to add.</p>
<p id="removeP">Click here to remove.</p>

</body>
</html>
0
 
LVL 25

Expert Comment

by:devic
ID: 9744584
@ Zontar

to match calculation:
=========================
currRowSpan = firstCell.getAttribute("rowspan") - 0;

 if(upOrDown == 1)
   firstCell.rowSpan = (currRowSpan + 1) + "";
 else
   firstCell.rowSpan = (currRowSpan - 1) + "";
}

short way:
==========================
 if(upOrDown == 1)
   firstCell.rowSpan ++;
 else
   firstCell.rowSpan --;
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Review of the nodejs code 1 36
Jquery driving me nuts... 14 27
list:contains ... search finds as it should but how could I get the number items found? 3 24
Boolean 13 18
What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

762 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