How can I change th attribute rowspan using js-CodePudding

I have this tag:

<th id="empty-span"  colspan="15" rowspan="5">

and after I click on a button I want to have

<th id="empty-span"  colspan="15" rowspan="6">

how can I do it using js?

CodePudding user response：

Try this :

document.getElementById("empty-span").rowSpan = "6";

Or: with incremental :

var currentNode = document.getElementById("empty-span");
currentNode.rowSpan = parseInt(currentNode.rowSpan)   1;

CodePudding user response：

You can do it simply by getting the element then changing the rowSpan proprety

document.getElementById("empty-span").rowSpan = "6";

Or with jquery :

$('#empty-span').attr('rowspan', '6');

CodePudding user response：

You can change the rowSpan using element.rowSpan.

To demonstrate, click on the first cell to change the rowSpan to 2;

function enlarge() {
  event.target.rowSpan = 2;
}

table, th, td {
    border: 1px solid;
}

<table>
    <tr>
        <td onclick='enlarge()'>Click me to enlarge!</td>
        <td>#1-1</td>
        <td>#1-2</td>
    </tr>
    <tr>
        <td>#2-1</td>
        <td>#2-2</td>
    </tr>
<table>