Добавить данные в таблицу HTML - PullRequest
Новая
       13

Добавить данные в таблицу HTML

0 голосов
/ 25 октября 2018

Я пытаюсь добавить дополнительные данные в таблицу ниже, используя JavaScript. 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Home Page</title>
    <script type="text/javascript" src="assets/style.js"></script>
  </head>
  <body>

      <br><br><br><br><br>

      <input type="text" id="personName" autofocus>
      <button type="button" onclick="addData();">Append Information</button>   <br><br><br><br><br>

      <table>
        <tr>
          <th>Client Name</th>
        </tr>


          <tr>
            <td>James Bond 007</td>
          </tr>

          <div id="addDataHere">

          </div>

      </table>
  </body>
</html>

style.js Используется ниже: 

function addData(){
  var personName = document.getElementById("personName").value;
  //console.log(personName);

  var getOlderInformation = document.getElementById("addDataHere").innerHTML;

  document.getElementById("addDataHere").innerHTML = getOlderInformation + "<tr><td>" + personName + "</tr></td>";



}

Ожидаемые результаты вывода:

Имена клиентов
Джеймс Бонд 007
Том Круз
............
............
............
............

Ответы [ 4 ]

0 голосов
/ 26 октября 2018

вы можете использовать список, чтобы соответствовать тому, что вам нужно, вот код 

    <!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Home Page</title>

</head>
<body>
  <input type="text" id="personName" autofocus>
  <button type="button" onclick="addData();">Append Information</button> 
    <p>Client Name</p>
  <ul id="mylist">
        <li>James Bond 007</li>
    </ul>


    <script type="text/javascript" src="main.js"></script>
</body>
</html>

и код функции использования adddata (), например, `function addData () {

    var mylist=document.getElementById("mylist");
    var personName=document.getElementById("personName").value;
    var node = document.createElement("LI");
    var textnode = document.createTextNode(personName);
    node.appendChild(textnode);
    mylist.appendChild(node);
}`

Я надеюсь, что это поможет вам:)

0 голосов
/ 26 октября 2018

Это должно помочь вам начать.

function addData() {
    var personName = document.getElementById("personName").value;
    var newRow = document.createElement("tr");
    var newCell = document.createElement("td");
    newCell.innerHTML = personName;
    newRow.append(newCell);
    document.getElementById("rows").appendChild(newRow);
    document.getElementById("personName").value = '';
}
    <input type="text" id="personName" autofocus>
    <button type="button" onclick="addData();">Append Information</button> <br><br><br><br><br>

    <table>
        <tr>
            <th>Client Name</th>
        </tr>
        <tbody id="rows">
            <tr>
                <td>James Bond 007</td>
            </tr>
        </tbody>
    </table>

Вы были на правильном пути, но важно отметить, что вы пытались использовать div внутри таблицы.Таблица имеет очень специфическую структуру, которая должна соответствовать, если вы хотите, чтобы она правильно отображалась.

Вы можете помещать элементы div внутри td или th, но не внутри самого элемента таблицы.Проверьте эту ссылку: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table

0 голосов
/ 26 октября 2018

Вы можете использовать подход, аналогичный тому, который вы пытаетесь: получить innerHTML, добавить новый html, а затем заменить innerHTML.Но вам нужно получить innerHTML вашего table (а не элемента, который вы вложили в него).

Например (заменил ваш button onclick на прослушиватель событий). 

const personName = document.getElementById('personName');
const appendButton = document.getElementById('appendButton');
const nameTable = document.getElementById('nameTable');

appendButton.addEventListener('click', (event) => {
  let content = nameTable.innerHTML;
  content += '<tr><td>' + personName.value + '</td></tr>';
  nameTable.innerHTML = content;
});
<input type="text" id="personName" autofocus>
<button type="button" id="appendButton">Append Information</button>
<table id="nameTable">
  <tr>
    <th>Client Name</th>
  </tr>
  <tr>
    <td>James Bond 007</td>
  </tr>
</table>

В зависимости от сложности того, что вы делаете, может быть быстрее пойти по маршруту createElement / appendChild, предложенному в других ответах, если вытакже используйте use createDocumentFragment.Другой пример: 

appendButton.addEventListener('click', (event) => {
  let frag = document.createDocumentFragment();
  let tr = document.createElement('tr');
  let td = document.createElement('td');
  td.appendChild(document.createTextNode(personName.value));
  tr.appendChild(td);
  frag.appendChild(tr);
  nameTable.appendChild(frag);
});
<input type="text" id="personName" autofocus>
<button type="button" id="appendButton">Append Information</button>
<table id="nameTable">
  <tr>
    <th>Client Name</th>
  </tr>
  <tr>
    <td>James Bond 007</td>
  </tr>
</table>
0 голосов
/ 25 октября 2018

Вы хотите использовать appendchild.Проверьте это для некоторых хороших примеров https://www.w3schools.com/jsref/met_node_appendchild.asp.Вы хотите перебрать данные, добавляя строку в таблицу, по одной строке за раз

...