Solved

Change Rowspan using javascript

Posted on 2003-11-13
10
9,923 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 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

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!

Question has a verified solution.

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

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

734 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