Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.24/jquery-ui.min.js"></script>
<script>
</script>
</head>
<body>
<table id="myTable" border="1">
  <tr>
    <th>First cell</th>
    <th>Second cell</th>
    <th>Third cell</th>
  </tr>  <tr>
    <td>First cell</td>
    <td>Second cell</td>
    <td>Third cell</td>
  </tr>  <tr>
    <td>First cell</td>
    <td>Second cell</td>
    <td>Third cell</td>
  </tr>  <tr>
    <td>First cell</td>
    <td>Second cell</td>
    <td>Third cell</td>
  </tr>  <tr>
    <td>First cell</td>
    <td>Second cell</td>
    <td>Third cell</td>
  </tr>
</table>
  <br><br><br>
<table id="myTable2" border="1">
  <tr>
    <td>First cell</td>
    <td>Second cell</td>
    <td>Third cell</td>
  </tr>  <tr>
    <td>First cell</td>
    <td>Second cell</td>
    <td>Third cell</td>
  </tr>  <tr>
    <td>First cell</td>
    <td>Second cell</td>
    <td>Third cell</td>
  </tr>  <tr>
    <td>First cell</td>
    <td>Second cell</td>
    <td>Third cell</td>
  </tr>  <tr>
    <td>First cell</td>
    <td>Second cell</td>
    <td>Third cell</td>
  </tr>
</table>
<br>
<button type="button" onclick="displayResult()">Insert cell</button>
<button type="button" onclick="AddNumerationsCells()">AddNumerationsCells</button>
<button type="button" onclick="HideSomeCells()">HideSomeCells</button>
<button type="button" onclick="ResetNumerations()">ResetNumerations</button>
</body>
</html>
 
function displayResult()
{
var firstRow=document.getElementById("myTable").rows[0];
var x=firstRow.insertCell(0);
x.innerHTML="New cell";
}
var newCellIndex = 0;
function AddNumerationsCells()
{
    var allTables = $("table");
    for (var i = 0; i < allTables.length; i++) {
        allRows = allTables[i].rows;
        for (var j = 0; j < allRows.length; j++) {
            if (allRows[j].cells[0].tagName == "TH"){
               var newTH = document.createElement('th'); 
               newTH.innerHTML = "Row Number";
               var firstCell = allRows[j].cells[0];
               allRows[j].insertBefore(newTH, firstCell);
            }
            else{
               var newCell = allRows[j].insertCell(newCellIndex);
            }
        }  
    }
    ResetNumerations();
}
function HideSomeCells(){
  var allTables = $("table");
    for (var i = 0; i < allTables.length; i++) {
        allRows = allTables[i].rows;
        for (var j = 0; j < allRows.length; j++) {
          if (j % 2 === 0) {
            allRows[j].style.display = "none";
          }
        }  
    }
}
function ResetNumerations(){
    var allTables = $("table");
    for (var i = 0; i < allTables.length; i++) {
        allRows = allTables[i].rows;
        var index = 0;
        for (var j = 0; j < allRows.length; j++) {
            if (allRows[j].cells[0].tagName != "TH"){
               if (allRows[j].style.display != "none") {
                  allRows[j].cells[newCellIndex].innerHTML = index++;
               }
            }
        }  
    }
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers