Текстовое поле при вставке новой строки в таблицу

0

Я должен ввести новую строку в таблицу, проблема заключается в том, что я хочу, чтобы новая строка была как первая строка, где это текстовые поля не просто слова..

function displayResult() {
  var table=document.getElementById("customers");
  var row=table.insertRow(0);
  var item=row.insertCell(0);
  var link=row.insertCell(1);
  var price=row.insertCell(2);
  var comment=row.insertCell(3);
  item.innerHTML="words";
  link.innerHTML="words";
  price.innerHTML="words";
  comment.innerHTML="words";
}

Оригинальная строка, в которой я хочу, чтобы новые строки были имитированы.

</tr>
<td>
  <input type ="text" name= "item" placeholder= "Item Description" />
</td>

Вот код кнопки, который вызывает функцию

<br>
<button type="button" onclick="displayResult()">Insert New Item</button>
  • 0
    Не могли бы вы обновить свое сообщение, чтобы оно включало точную разметку, с которой вы начинаете, И точную разметку, которую вы хотите создать? Кроме того, никогда не используйте встроенные js (как onclick в вашем html).
  • 0
    Я использую HTML с PHP
Показать ещё 5 комментариев
Теги:
html-table
rows

1 ответ

0

Живой демо здесь (нажмите).

Все, что вам нужно, это cloneNode(), или вы можете просто создать каждый элемент еще раз, добавить их и вставить строку, но это не так чисто. Некоторые проблемы с вашим кодом: Не используйте <br>. Это долгое время не рекомендуется. Для этой цели вы должны использовать поле css/padding/position. Не используйте onclick или любые встроенные js в html. Это никогда не было хорошей практикой. Вместо этого получите ссылку на элемент и добавьте прослушиватель событий с помощью javascript. Кроме того, ваш html строки/ячейки недействителен. У вас есть строка, закрытая перед ячейкой...

<table>
  <tbody>
    <tr id="myRow"> <!-- you can use this id to find the row with javascript -->
      <td>
        <input type="text" name="item" placeholder="Item Description">
      </td>
    </tr>
  </tbody>
</table>
<button id="myButton" type="button">Insert New Item</button> <!-- you can use this id to find the button with javascript -->

ЯШ:

var myButton = document.getElementById('myButton'); //get button with id "myButton"
var myRow = document.getElementById('myRow'); //get row with id "myRow"

myButton.addEventListener('click', function() { //add click function to "myButton"
  var newRow = myRow.cloneNode(); //clone the row
  myRow.parentNode.insertBefore(newRow, myRow.nextSibling); //add newRow after "myRow"
});
Поделиться
  • 0
    Когда я запускаю код в ссылке, он не работает ...
  • 0
    @ user3038531 Что не работает? Этот код в порядке.
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню