Wie Auto-Nummer Tabellenzeile hinzufügen?

Question

In meinem Fall meine HTML und Javascript:

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

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

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

 
<script src="https://ajax.googleapis.com/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>

ich möchte es machen wie diese

1.

2.

3.

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

Answer 1

Dieses versuchen:

var i = 1; 

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

Answer 2

eine Variable definieren (i im Beispiel unten), die außerhalb der Funktion und dann wird die Variable inkrementiert, nachdem jedes anhängen.

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.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/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>

Answer 3

Hier ist ein funktionierendes Beispiel: https://jsfiddle.net/o46asuyb/1/

Sie wollen eine globale Variable haben den Überblick über die Zeile zu halten, sind Sie zur Zeit an:

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

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

Answer 4

Sie haben zwei Probleme mit Ihrem Code. Zuerst haben Sie nicht wirklich haben ein <tbody> Element, so dass Sie nichts anhängen müssen. Zweitens müssen Sie eine Schleife verwenden, die die anzuzeigende Zahl erhöht.

Hier ist ein funktionstüchtiges Beispiel:

$('.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.com/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>

hoffe, das hilft! :)

Answer 5

Sie CSS-Zähler für diese

Überprüfen Sie den folgenden Code-Schnipsel

$('.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.com/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>

Answer 6

Ihre HTML verwenden können, müssen Sie 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> 

hinzufügen

und dann das Skript:

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