asked on

Change Rowspan using javascript

How do you change the rowspan property of a table cell using javascript?

tdObj.rowSpan = "3"; // capital "S"

or

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

where

tdObj is a DOM reference to the TD element.

NetGroove

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>

devic

hi trizzag,

here is two ways:

==================================
<table border=1 width=300 height=300>
<tr id=myrow>
      <td> </td>
      <td> </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>

Zontar

NetGroove: He said rowspan, not colspan.

devic: He said rowspan, not row colour.

Please read the question again.

devic

@Zontar you are right!

but is same way ;)

================================
<table border=1 width=300 height=300>
<tr>
      <td id=mytd> </td>
      <td> </td>
</tr>
<tr>
      <td> </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>

devic

with right buttons values ;)

=======================================
<table border=1 width=300 height=300>
<tr>
      <td id=mytd> </td>
      <td> </td>
</tr>
<tr>
      <td> </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>

devic

@ Zontar

rowspan and rowSpan is not the same ;)

ASKER CERTIFIED SOLUTION

Zontar

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Zontar

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>

devic

@ 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 --;