Строить само-повторяющуюся таблицу в JavaScript?

В моем коде я принимаю пользовательские данные, сохраняю их и передаю их в API. Затем мне нужно вывести эти пользовательские данные в таблицу. Каждый раз, когда пользователь нажимает кнопку для отправки своих данных, мне нужно добавить новую строку новых пользовательских данных.

Я ознакомился с созданием таблиц в javascript, но, очевидно, я использую IDS в своей таблице для передачи переменной, и не уверен, как перебрать таблицу, которая создается с пользовательскими вводами, а также имеет IDS для элемента.

Я нашел обходной путь через html ниже, но он допускает ограниченное количество вводимых ресурсов и является чрезвычайно небрежным, я уверен, что есть лучший способ для меня учиться.

Большое спасибо!

Функция:

function writeFName() {

var fNameGroup = document.querySelector('#fName_Input').value;
first_name = document.querySelector('#fName_Input').value;

localStorage.setItem('fName-group', fNameGroup);

var cfmF = confirm("Did you mean to enter: 
" + fNameGroup + '?');

if (cfmF) {
    console.log(fNameGroup);
    window.alert('Success!');

    first_name = localStorage.getItem('fName-group');

    document.querySelector("#firstname" + CSS.escape(x)).innerHTML = first_name;
    x++
} else {
    window.alert('Please Re-Enter First Name');
}
}


<div id="outputTable">
<table>
<tr>
<th> First Name </th>hg
<th> Last Name  </th>
<th> Email      </th>
    </tr>
<tr>
<td id="firstname"></td>
<td id="lastname"></td>
<td id="email"></td>
</tr><tr>
<td id="firstname1"></td>
<td id="lastname1"></td>
<td id="email1"></td>
</tr><tr>
<td id="firstname2"></td>
<td id="lastname2"></td>
<td id="email"></td>
</table>

Всего 2 ответа


Рабочий пример: https://jsfiddle.net/aL2u1wj9/ о динамическом добавлении новых строк в таблицу.

Вы можете создавать элементы с помощью document.createElement (); затем вам нужно добавить эти элементы в DOM с помощью Node.appendChild () .

<table id="dynamicTable">
<tr>
<th> First Name </th>
<th> Last Name  </th>
<th> Email      </th>
    </tr>
<tr>
<td id="firstname"></td>
<td id="lastname"></td>
<td id="email"></td>
</tr>
</table>


function appendToTable(firstName, lastName, emailAddress) {
   var table = document.getElementById("dynamicTable");

   var tr = document.createElement("tr");

   var firstNameTD = document.createElement("td");
   var lastNameTD =  document.createElement("td");
   var emailAddressTD =  document.createElement("td");

   table.appendChild(tr);

   tr.appendChild(firstNameTD);
   tr.appendChild(lastNameTD);
   tr.appendChild(emailAddressTD);

   firstNameTD.textContent = firstName;
   lastNameTD.textContent = lastName;
   emailAddressTD.textContent = emailAddress;
}

appendToTable("John", "Doe", "email 1 @ address");
appendToTable("Jane", "Doe", "email 2 @ address");
appendToTable("Another", "one", "email 3 @ address");

Пожалуйста, проверьте работающий пример плагина таблицы, который я сделал с использованием jquery, css и bootstrap. Вы можете добавить несколько строк и редактировать поля ввода.

https://codepen.io/yadu_krish/pen/GPgpwQ

code for adding Multiple rows on button click


$("#btnAdd").click(function(){ 
var html = '<tr><td><input class="name" type="text"/></td><td><input 
type="text" class="designation"/></td><td><select class="Department"><option 
selected >Please Select</option><option 
value="Development">Development</option><option 
value="Testing">Testing</option><option value="UI">UI</option><option 
value="3">Management</option></select></td><td><button class="btn- btn-link 
delete">Delete</button> <button class="btn- btn-link done">Done</button> </td> 
</tr>'
$('tbody').append(html); 
});  

Есть идеи?

10000