Solved

Change Rowspan using javascript

Posted on 2003-11-13
10
9,967 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
Transaction Monitoring Vs. Real User Monitoring

Synthetic Transaction Monitoring Vs. Real User Monitoring: When To Use Each Approach? In this article, we will discuss two major monitoring approaches: Synthetic Transaction and Real User Monitoring.

 
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

Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

Question has a verified solution.

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

This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…

691 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