5

HTMLとJavaScriptは初めてです。HTMLでこのような問題が発生しました（以下のコードは、参照しやすいように問題を視覚化するだけです）。

<tr>
    <td>1</td>
    <td>Harry</td>
</tr>
<tr>
    <td>2</td>
    <td>Simon</td>
</tr>
    <td>3</td>
    <td>Maria</td>
</tr>
</tr>
    <td>4</td>
    <td>Victory</td>
</tr>

これは名前リストですが、問題は、このテーブルに名前を追加する必要があり、番号1の前に追加する必要があるため、番号リストを書き直す必要があることです（例：1 1 2 3 4-> 1 2 3 4 5）。それは良い方法ではないと思います。

注：リスト番号の減少を上から下に変更したくありません。そしてこれはHTMLファイルなのでPHPを適用することはできません

誰でも私が「i」のような変数に数字を作るのを手伝ってくれるし、関数は私が変数iを上から下に自動的に増やすのを手伝ってくれる。

<tr>
    <td>i</td>
    <td>Harry</td>
</tr>
<tr>
    <td>i</td>
    <td>Simon</td>
</tr>
    <td>i</td>
    <td>Maria</td>
</tr>
</tr>
    <td>i</td>
    <td>Victory</td>
</tr>

たとえば、関数Fill_i：この場合はJavaScriptを使用する必要があると思います。この問題についてのあなたの助けと提案に感謝します。

繰り返しますが、PHPまたはASPの使用は許可されていません。新しい名前を追加するときは、HTMLを使用して手動で追加します。

4

7 に答える 7

15

cssカウンターを使用できます-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>

フィドル

于 2012-06-14T03:41:46.217 に答える
5

これはあなたのために働くはずです：

<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>

スクリプトは、テーブルの直後に配置する必要があります。テーブルの各行を調べ、そのセル内の増分番号で先頭にセルを追加します。

JSFiddleデモ

于 2012-06-14T03:34:47.110 に答える
1

編集：投稿された他の解決策が機能するようです（これを入力している間に追加されました）。

このような動的な処理を行うには、実際にはPHPを使用する必要があります。これは、単一のforループでは簡単になります。

ただし、HTML / Javascriptの使用を主張する場合（またはおそらくこれは「静的ページ」です...）、あなたが求めていることは可能であるはずです。

使用する各要素にクラスを追加できる<td>ため、次のようになります。

<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>

次に、次のようなことを行うjavascript関数があります。

var list = document.getElementsByClassName("personid");
for (var i = 1; i <= list.length; i++) {
    list[i].innerHTML = i;
}
于 2012-06-14T03:37:26.277 に答える
1

順序付きリストは必要ありませんか？

<ol>
  <li>Fred</li>
  <li>Barry</li>
</ol>
于 2012-06-14T03:46:16.233 に答える
1 
<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>
于 2012-06-14T03:53:16.557 に答える
0

私はこれを行うと言います（jqueryやその他の凝ったものをロードしないと仮定します）：

<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>

お役に立てれば ：）

于 2012-06-14T03:43:09.790 に答える
0

これを試して

$(document).ready(function() {
    var addSerialNumber = function () {
        $('table tr').each(function(index) {
            $(this).find('td:nth-child(1)').html(index);
        });
    };
    addSerialNumber();
 });
于 2022-01-20T06:53:52.783 に答える