trizzag
asked on
Change Rowspan using javascript
How do you change the rowspan property of a table cell using javascript?
Like this:
<html>
<head>
<script>
function change(){
tb = document.getElementsByTagN ame('table ')[0].firs tChild;
td = tb.rows[1].cells[0];
td.colSpan=3;
}
</script>
</head>
<body>
<table border=1>
<tr><td>A</td><td>B</td><t d>C</td></ tr>
<tr><td><center>1</center> </td></tr>
<tr><td>A</td><td>B</td><t d>C</td></ tr>
</table>
<form>
<input type=button value=Change
onClick="change()">
</form>
</body>
</html>
<html>
<head>
<script>
function change(){
tb = document.getElementsByTagN
td = tb.rows[1].cells[0];
td.colSpan=3;
}
</script>
</head>
<body>
<table border=1>
<tr><td>A</td><td>B</td><t
<tr><td><center>1</center>
<tr><td>A</td><td>B</td><t
</table>
<form>
<input type=button value=Change
onClick="change()">
</form>
</body>
</html>
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.getElementB yId("myrow ");
myRow.bgColor="red";
}
</script>
<button onclick=changeRowColor()>c hange Row Color to red</button>
<script>
function changeRowColor2()
{
var myRow=document.getElementB yId("myrow ");
myRow.setAttribute("bgColo r","blue") ;
}
</script>
<button onclick=changeRowColor2()> change Row Color to blue</button>
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.getElementB
myRow.bgColor="red";
}
</script>
<button onclick=changeRowColor()>c
<script>
function changeRowColor2()
{
var myRow=document.getElementB
myRow.setAttribute("bgColo
}
</script>
<button onclick=changeRowColor2()>
NetGroove: He said rowspan, not colspan.
devic: He said rowspan, not row colour.
Please read the question again.
devic: He said rowspan, not row colour.
Please read the question again.
@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.getElementBy Id("mytd") ;
myTD.rowSpan="2";
}
</script>
<button onclick=changeRowColor()>c hange Row Color to red</button>
<script>
function changeRowColor2()
{
var myTD=document.getElementBy Id("mytd") ;
myTD.setAttribute("rowSpan ","1");
}
</script>
<button onclick=changeRowColor2()> change Row Color to blue</button>
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.getElementBy
myTD.rowSpan="2";
}
</script>
<button onclick=changeRowColor()>c
<script>
function changeRowColor2()
{
var myTD=document.getElementBy
myTD.setAttribute("rowSpan
}
</script>
<button onclick=changeRowColor2()>
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.getElementBy Id("mytd") ;
myTD.rowSpan="2";
}
</script>
<button onclick=changeRowColor()>c hange mytd rowspan to 2</button>
<script>
function changeRowColor2()
{
var myTD=document.getElementBy Id("mytd") ;
myTD.setAttribute("rowSpan ","1");
}
</script>
<button onclick=changeRowColor2()> change mytd rowspan to 1</button>
==========================
<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.getElementBy
myTD.rowSpan="2";
}
</script>
<button onclick=changeRowColor()>c
<script>
function changeRowColor2()
{
var myTD=document.getElementBy
myTD.setAttribute("rowSpan
}
</script>
<button onclick=changeRowColor2()>
@ Zontar
rowspan and rowSpan is not the same ;)
rowspan and rowSpan is not the same ;)
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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("t blmain");
var firstRow = tblMain.getElementsByTagNa me("tr")[0 ];
var firstCell = firstRow.getElementsByTagN ame("th")[ 0];
currRowSpan = firstCell.getAttribute("ro wspan") - 0;
if(upOrDown == 1)
firstCell.rowSpan = (currRowSpan + 1) + "";
else
firstCell.rowSpan = (currRowSpan - 1) + "";
}
function remove()
{
var tbody = document.getElementById("t blmain").g etElements ByTagName( "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("t blmain").g etElements ByTagName( "tbody")[0 ];
var rows = tbody.getElementsByTagName ("tr");
var newRow = document.createElement("tr ");
var newCell = document.createElement("td ");
newCell.appendChild( document.createTextNode(ro ws.length + 1 + "") );
newRow.appendChild(newCell );
tbody.appendChild(newRow);
changeSpan(1);
}
window.onload
= function()
{
document.getElementById("a ddP").oncl ick = add;
document.getElementById("r emoveP").o nclick = 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>
<!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("t
var firstRow = tblMain.getElementsByTagNa
var firstCell = firstRow.getElementsByTagN
currRowSpan = firstCell.getAttribute("ro
if(upOrDown == 1)
firstCell.rowSpan = (currRowSpan + 1) + "";
else
firstCell.rowSpan = (currRowSpan - 1) + "";
}
function remove()
{
var tbody = document.getElementById("t
var rows = tbody.getElementsByTagName
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("t
var rows = tbody.getElementsByTagName
var newRow = document.createElement("tr
var newCell = document.createElement("td
newCell.appendChild( document.createTextNode(ro
newRow.appendChild(newCell
tbody.appendChild(newRow);
changeSpan(1);
}
window.onload
= function()
{
document.getElementById("a
document.getElementById("r
};
</script>
</head>
<body>
<table border="1" id="tblmain" cellpadding="5" cellspacing="0">
<tbody>
<tr>
<th rowspan="8">Header</th><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>
@ Zontar
to match calculation:
=========================
currRowSpan = firstCell.getAttribute("ro wspan") - 0;
if(upOrDown == 1)
firstCell.rowSpan = (currRowSpan + 1) + "";
else
firstCell.rowSpan = (currRowSpan - 1) + "";
}
short way:
==========================
if(upOrDown == 1)
firstCell.rowSpan ++;
else
firstCell.rowSpan --;
to match calculation:
=========================
currRowSpan = firstCell.getAttribute("ro
if(upOrDown == 1)
firstCell.rowSpan = (currRowSpan + 1) + "";
else
firstCell.rowSpan = (currRowSpan - 1) + "";
}
short way:
==========================
if(upOrDown == 1)
firstCell.rowSpan ++;
else
firstCell.rowSpan --;
or
tdObj.setAttribute("rowspa
where
tdObj is a DOM reference to the TD element.