In my case, my HTML and javascript:

$('.addRow').on('click', function() {
  addRow();
});

function addRow() {
  var tr = '<tr>' +
    '<td></td>' +
    '</tr>';
  $('tbody').append(tr);
};

<link href=".3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src=".9.1/jquery.min.js"></script>
<table id="example1" class="table table-bordered">
  <thead>
    <th>No.</th>
    <th style="text-align:center"><a href='#' class="addRow"><i class="glyphicon glyphicon-plus"></i></a></th>
  </thead>
</table>

In my case, my HTML and javascript:

$('.addRow').on('click', function() {
  addRow();
});

function addRow() {
  var tr = '<tr>' +
    '<td></td>' +
    '</tr>';
  $('tbody').append(tr);
};

<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis./ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="example1" class="table table-bordered">
  <thead>
    <th>No.</th>
    <th style="text-align:center"><a href='#' class="addRow"><i class="glyphicon glyphicon-plus"></i></a></th>
  </thead>
</table>

I want to make it like this

1.

2.

3.

............

• javascript
• jquery
• css

• Consider accepting the answer if it is of any help – Geeky Commented Mar 15, 2017 at 5:12

6 Answers 6

You can use css counters for this

check the following code snippet

$('.addRow').on('click', function() {
  addRow();
});

function addRow() {
  var tr = '<tr>' +
    '<td>hello</td>' +
    '</tr>';
  $('table tbody').append(tr);
};

tbody {
  counter-reset: row;
  /* Set the row counter to 0 */
}

tbody tr::before {
  counter-increment: row;
  /* Increment the row counter*/
  content: counter(row) ": ";
  /* Display the row */
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example1" class="table table-bordered">
  <thead>
    <th>No.</th>
    <th style="text-align:center"><a href='#' class="addRow">AddRow</a></th>
  </thead>
  <tbody></tbody>
</table>

Try this:

var i = 1;

function addRow() {
  var tr = '<tr>' +
    '<td>' + i + '.</td>' +
    '</tr>';
  $('tbody').append(tr);
  i++;
};

Define a variable (i in the example below) outside of the function and then increment the variable after each append.

var i = 1;

$('.addRow').on('click', function() {
  addRow();
});

function addRow() {
  var tr ='<tr>'+
         '<td>'+ i +'.</td>'+
         '</tr>';
  $('tbody').append(tr);
  i++;
};

<link href="//netdna.bootstrapcdn./bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example1" class="table table-bordered">
    <thead>
            <th>No.</th>
            <th style="text-align:center"><a href='#' class="addRow"><i class="glyphicon glyphicon-plus"></i></a></th>
    </thead>
    <tbody></tbody>
</table>

Your html, you need to add tbody

<table id="example1" class="table table-bordered">
  <thead>
    <th>No.</th>
    <th style="text-align:center">
      <a href='#' class="addRow"><i class="glyphicon glyphicon-plus"></i></a>
    </th>
  </thead>
  <tbody>

  </tbody>
</table>

and then your script:

$('.addRow').on('click', function() {
  addRow();
});
//Define row number
var rowNum = 1;
function addRow() {
  var tr = '<tr>' + '<td>' + rowNum + '</td>' + '</tr>';
  $('tbody').append(tr);
  rowNum++;
};

Here's a working example: https://jsfiddle/o46asuyb/1/

You'll want to have a global variable to keep track of the row you're currently at:

var row = 1;
function addRow() {
  var tr='<tr>'+
         '<td>'+ (row) + '. </td>'+
         '</tr>';
  row++;
  $('tbody').append(tr);
}

$('.addRow').on('click', function() {
    addRow();
});

You have two problems with your code. First, you don't actually have a <tbody> element, so you have nothing to append to. Second, you need to use a loop that will increase the number to display.

Here's a working sample:

$('.addRow').on('click', function() {
  addRow();
});

var i = 1;

function addRow() {
  var tr = '<tr>' +
    '<td>' + i + '</td>' +
    '</tr>';
  $('tbody').append(tr);
  i++;
};

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example1" class="table table-bordered">
  <thead>
    <th>No.</th>
    <th style="text-align:center"><a href='#' class="addRow">Add Row</a></th>
  </thead>
  <tbody>

  </tbody>
</table>

Hope this helps! :)