Solved

Change Rowspan using javascript

Posted on 2003-11-13
10
9,732 Views
Last Modified: 2013-11-19
How do you change the rowspan property of a table cell using javascript?
0
Comment
Question by:trizzag
  • 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
 
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

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.
This article discusses how to create an extensible mechanism for linked drop downs.
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

760 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

22 Experts available now in Live!

Get 1:1 Help Now