发表新帖
发表新帖

HTML and JavaScript auto increment number

前端 未结
关注
6 1835
逝去的感伤
逝去的感伤 2020-12-30 17:04

I am new to HTML and JavaScript. I got a problem like this in HTML (This code below only visualize the problem for you to easy to reference.)
相关标签:
6条回答
  • 野的像风
    2020-12-30 17:27 
    <script>
function addRow(index, name){
    var tbody = document.getElementById("nameList");
    var row = document.createElement("tr");
    var data1 = document.createElement("td");
    data1.appendChild(document.createTextNode(index));
    var data2 = document.createElement("td");
    data2.appendChild(document.createTextNode(name));
    row.appendChild(data1);
    row.appendChild(data2);
    tbody.appendChild(row);
}
var name=new Array();
name[0]="Harry";
name[1]="Simon";
name[2]="Maria";
name[3]="Victory";
for(var i=0; i < name.length; i++) {
    addRow(i,name[i]);
}
</script>
<html>
<body>
<table id="nameList">
</table>
</body>
</html>
    0 讨论(0)
  • 一整个雨季
    2020-12-30 17:28

    Edit: seems like the other solution posted would work do (was added while I typed this up).

    You really should be using PHP to do something dynamic like this, which would become trivial with a single for loop.

    However, if you insist on using HTML/Javascript (or perhaps this is a 'static page'...) then what you are asking should be possible.

    You could add a class to each of the <td> elements you want to use, so:

    <tr>
    <td class='personid'>i</td>
    <td>Harry</td>
</tr>
<tr>
    <td class='personid'>i</td>
    <td>Simon</td>
</tr>
    <td class='personid'>i</td>
    <td>Maria</td>
</tr>
</tr>
    <td class='personid'>i</td>
    <td>Victory</td>
</tr>

    Then you would have a javascript function that does something like this:

    var list = document.getElementsByClassName("personid");
for (var i = 1; i <= list.length; i++) {
    list[i].innerHTML = i;
}
    0 讨论(0)
  • 余生分开走
    2020-12-30 17:38

    You can use a css counter - MDN

    table {
  counter-reset: section;
}

.count:before {
  counter-increment: section;
  content: counter(section);
}
    <table>
  <tr>
    <td class="count"></td>
    <td>Harry</td>
  </tr>
  <tr>
    <td class="count"></td>
    <td>Simon</td>
  </tr>
  <tr>
    <td class="count"></td>
    <td>Maria</td>
  </tr>
  <tr>
    <td class="count"></td>
    <td>Victory</td>
  </tr>
</table>

    FIDDLE

    0 讨论(0)
  • 粉色の甜心
    2020-12-30 17:41

    This should work for you:

    <table>
  <tr>
    <td>Harry</td>
  </tr>
  <tr>
    <td>Simon</td>
  </tr>
  <tr>
    <td>Maria</td>
  </tr>
  <tr>
    <td>Victory</td>
  </tr>
</table>
<script>
    var tables = document.getElementsByTagName('table');
    var table = tables[tables.length - 1];
    var rows = table.rows;
    for(var i = 0, td; i < rows.length; i++){
        td = document.createElement('td');
        td.appendChild(document.createTextNode(i + 1));
        rows[i].insertBefore(td, rows[i].firstChild);
    }
</script>

    The script should be placed immediately after your table. It goes through each row of your table and adds an extra cell to the beginning with the incrementing number inside that cell.

    JSFiddle Demo

    0 讨论(0)
  • 猫巷女王i
    2020-12-30 17:47

    Are you sure you don't want an ordered list?

    <ol>
  <li>Fred</li>
  <li>Barry</li>
</ol>
    0 讨论(0)
  • 独厮守ぢ
    2020-12-30 17:54

    I would say do this (im going to assume you are not going to load in jquery or anything fancy):

    <html>
<head>
<script type="text/javascript>
function writeTable(){
// list of names
var myList = [ "name1", "name2", "etc", "etc"];
// your variable to write your output
var outputTable = "<table>";
//the div to write the output to
var outputDiv = document.getElementById("output");
//the loop that writes the table
for (var i=0; i<myList.length; i++){
   outputTable += "</tr><td>"+i+"</td><td>"+myList[i]+"</td></tr>";
}
//close the table
outputTable += "</table>";
//write the table
outputDiv.innerHTML = outputTable;
}
</script>
</head>
<body onload=writeTable()>
<div id='output'></div>
</body>
</html>

    hope this helps :)

    0 讨论(0)
 看不清?
提交回复
热议问题