So ersetzen Sie einen Text mit Zeilenanzahl mit Javascript

-2

Ich habe eine dynamische Tabelle. dass ich Nummer für jeden tr hinzufügen würde. Wie kann ich den Hallo-Text durch die Zählung jedes tr mit Javascript ersetzen? hier ist mein Snippet Tabelle:So ersetzen Sie einen Text mit Zeilenanzahl mit Javascript

<html> 
 
<head></head> 
 
<body> 
 
<table border="1"> 
 
    <tr> 
 
    <th>Rownumber</th> 
 
    <th>Name</th> 
 
    </tr> 
 
    <tr> 
 
    <th>Hello</th> 
 
    <th>A</th> 
 
    </tr> 
 
    <tr> 
 
    <th>Hello</th> 
 
    <th>B</th> 
 
    </tr> 
 
    <tr> 
 
    <th>Hello</th> 
 
    <th>C</th> 
 
    </tr> 
 
</table> 
 
</body> 
 
</html>

Quelle

2017-07-23 inaz

Sie <td> statt <th> nach der Kopfzeile verwendet werden soll.

$('tr').each(function(index, row){ 
 
    $(row).children('td').first().text(index); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
<head></head> 
 
<body> 
 
<table border="1"> 
 
    <tr> 
 
    <th>Rownumber</th> 
 
    <th>Name</th> 
 
    </tr> 
 
    <tr> 
 
    <td>Hello</td> 
 
    <td>A</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Hello</td> 
 
    <td>B</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Hello</td> 
 
    <td>C</td> 
 
    </tr> 
 
</table> 
 
</body> 
 
</html>

Quelle

2017-07-23 07:08:59 Dij

Hier ist die Lösung für Ihr Problem -

var table = document.querySelector("#myTable"); 
 
var rows = table.querySelectorAll("tr"); 
 
let index = 0; 
 

 
for(let row of rows){ 
 
    for(let col of row.querySelectorAll("th")){ 
 
    if(col.textContent == 'Hello'){ 
 
     col.textContent = index; 
 
    } 
 
    } 
 
    index++; 
 
}

<table border="1" id="myTable"> 
 
    <tr> 
 
    <th>Rownumber</th> 
 
    <th>Name</th> 
 
    </tr> 
 
    <tr> 
 
    <th>Hello</th> 
 
    <th>A</th> 
 
    </tr> 
 
    <tr> 
 
    <th>Hello</th> 
 
    <th>B</th> 
 
    </tr> 
 
    <tr> 
 
    <th>Hello</th> 
 
    <th>C</th> 
 
    </tr> 
 
</table>

Quelle

2017-07-23 07:09:46 Ashvin777

Sie müssen alle <tr> Elemente innerhalb der Tabelle zu erhalten. Dann durchlaufen Sie die <tr> s und beginnend mit der zweiten, ersetzen Sie den Text des ersten Kindes mit dem Index der aktuellen <tr>.

let tableRows = document.querySelectorAll("tr") 

tableRows.forEach((tr, index) => { 

    if(index === 0) { 
     //Do nothing bc you don't want to remove the text in the first table row 
    } else { 
     let firstChild = tr.children[0] 
     firstChild.innerText = index 
    } 

})

Quelle

2017-07-23 07:11:15

können Sie find("td:first") verwenden, um die Zahlen zu erhalten, ersetzen würde „Hallo“. Auch, da es eine Tabelle ist, müssen Sie td verwenden. th für Header verwendet:

$('tr').each(function(index, row) { 
 
    $(row).find("td:first").text(index); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 

 
<head></head> 
 

 
<body> 
 
    <table border="1"> 
 
    <tr> 
 
     <th>Rownumber</th> 
 
     <th>Name</th> 
 
    </tr> 
 
    <tr> 
 
     <td>Hello</td> 
 
     <td>A</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Hello</td> 
 
     <td>B</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Hello</td> 
 
     <td>C</td> 
 
    </tr> 
 
    </table> 
 
</body> 
 

 
</html>

Quelle

2017-07-23 07:12:03

So ersetzen Sie einen Text mit Zeilenanzahl mit Javascript

Antwort

Verwandte Themen