Создание таблицы с само повторением в javascript? - PullRequest
Новая
       8

Создание таблицы с само повторением в javascript?

0 голосов
/ 16 января 2020

В своем коде я беру пользовательские вводы, сохраняю их и передаю в 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: \n" + 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 ]

1 голос
/ 16 января 2020

Рабочий пример: 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");
0 голосов
/ 17 января 2020

Пожалуйста, проверьте рабочий пример плагина таблицы, который я сделал, используя 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); 
});
...