Добавление новых ячеек в таблицу с помощью Javascript

-2

Как добавить новую ячейку в таблицу с помощью Javascript? Текст, введенный в бонусы Name, должен быть текстом для новой ячейки.Добавление новых ячеек в таблицу с помощью Javascript

<script type="text/javascript"> 
/* <![CDATA[ */ 
/* ]]> */ 
</script> 
</head> 
<body> 

<!-- HEADER 1 & 2 --> 
<h1>Central Valley Lanes</h1> 
<h2>2008 Bowling Teams</h2> 


Bowler's name <input type="text" name="bowlersName" size="15" /><input type="button" value="Add Bowler" /> 
<h2>Team Roster</h2> 
<form action="FormProcessor.html" method="get"> 
<table border="1" id="bowlerList"> 
<tr><td id="empty">Your team roster is empty</td></tr> 
</table> 
<br /> 
<input type="button" value="Submit Roster" /> 
</form>

источник

2013-04-28 Johnson McQuillen O' Doneall

Хорошо, поэтому вы можете использовать jquery для добавления ячеек на основе ввода. Что-то, как это должно работать:

var NewName = $("#bowlersName").val(); 
jQuery("#bowlerList tr").First().Before("<tr><td>" + NewName "</td></tr>");

Что это делает первый находит таблицу, то находит Tr элементы таблицы. Из этих элементов он находит первый элемент tr и добавляет перед ним новую ячейку. Это будет проходить сверху вниз, так как в новейшем элементе будет сверху, где самый старый будет внизу.

Чтобы получить слева использование правого типа этого:

jQuery("#bowlerList tr").First().Append("<td>" + NewName + "</td>");

Взгляните на этом сайте для полного объяснения кода: http://api.jquery.com/

Кроме того, если вы хотите, чтобы удалить ячейку говоря у вас нет боулеров это может работать:

jQuery("#empty").remove();

источник

2013-04-28 23:21:12 Nomad101

Спасибо, не могли бы вы дать мне полный код? Мне действительно нужно это прямо сейчас. –

@Johnson Посмотрите функции jQuery, которые он использовал, и напишите сами! Это довольно просто. – doppelgreener

Если вы не используете JQuery, вы можете сделать это следующим образом:

var tr = document.createElement('tr'); 
var td = tr.appendChild(document.createElement('td')); 
td.innerText = "Your new row text"; 
document.getElementById("bowlerList").appendChild(tr);

источник

2013-04-28 23:23:51

У меня действительно есть вопрос об этом конкретном способе делать вещи. Есть ли способ выполнить метод jquery.before(), используя эту идею? У меня создается впечатление, что обход чистого тела в определенных обстоятельствах может быть более быстрым. – Nomad101

Конечно. 'var table = document.getElementById (" bowlerList ");' 'table.insertBefore (tr, table.firstChild);' –

ok Я больше смотрел, действительно ли вставкаBefore вела себя так, как я думал. Благодарим вас за разъяснения. – Nomad101

Добавление новых ячеек в таблицу с помощью Javascript

ответ

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