Номер приращения для версии HTML и JavaScript

Я новичок в HTML и JavaScript. У меня проблема, как это в HTML (Этот код ниже только визуализировать проблему для вас легко ссылки.)Номер приращения для версии HTML и JavaScript

<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, поэтому мне нужно переписать список номеров (EX: 1 1 2 3 4 -> 1 2 3 4 5). Я чувствую, что это не очень хорошо.

ПРИМЕЧАНИЕ. Я не хочу менять количество номеров списка снизу сверху вниз. И это HTML файл поэтому не может применять PHP

Любой человек может помочь мне сделать номер переменной, как «я», и функция может помочь мне для автоматического заполнения переменной я приращение сверху вниз, как

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

источник

2012-06-14 Ryan

AAAARRRRRGGGGGGG !!!!! ТД и ТР !!! lol jk, где данные, поступающие от них, имеют имена в полях имени? – Ryan

Данные должны добавляться отдельно, наберите его. Это не из любой базы данных – Ryan

Это должно работать для вас:

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

источник

2012-06-14 03:34:47 Paulpro

спасибо, это работа для меня – Ryan

Edit: Похоже, что other solution публикуемую будет работать делать (было добавлено в то время как я напечатал это вверх).

Вы действительно должны использовать 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>

Тогда вы бы яваскрипт функции, которая делает что-то вроде этого:

var list = document.getElementsByClassName("personid"); 
for (var i = 1; i <= list.length; i++) { 
    list[i].innerHTML = i; 
}

источник

2012-06-14 03:37:26

+1 Это тоже делает свою работу – Paulpro

Я пробую эту – Ryan

Вы можно использовать 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> 
<td class="count"></td> 
<td>Maria</td> 
</tr> 
<tr> 
<td class="count"></td> 
<td>Victory</td> 
</tr> 
</table>

FIDDLE

источник

2012-06-14 03:41:46 Musa

Whoa. Я никогда бы не догадался, что это возможно только с помощью CSS. Это безумие. +1 – Paulpro

это лучше, чем мой ответ, приятно :) – Ryan

Yupp, действительно потрясающий. это код предварительного кода CSS – Ryan

Я бы сказал это сделать (им будет считать, что вы не собираетесь загружать в 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-14 03:43:09 Ryan

Спасибо за ваш ответ – Ryan

Вы уверены, что дон Не хотите упорядоченный список?

<ol> 
    <li>Fred</li> 
    <li>Barry</li> 
</ol>

источник

2012-06-14 03:46:16

извините, я не мог использовать это – Ryan

<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-14 03:53:16

Номер приращения для версии HTML и JavaScript

ответ

Смежные вопросы