Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Change Rowspan using javascript

Posted on 2003-11-13
10
Medium Priority
?
10,158 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
Industry Leaders: 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 500 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

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
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…

609 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