Как вставить строку как второй-последний ряд? - PullRequest
Новая
       10

Как вставить строку как второй-последний ряд?

0 голосов
/ 05 июня 2019

Есть много похожих вопросов, но каждый, который я могу найти, использует jQuery, который я хочу смягчить.Содержимое вставленной строки будет создано динамически.Мой сломанный подход: 

function addRow() {
  let newRow = '<tr><td>Boo</td><td>✔</td><td></td><td>✔</td></tr>';
  document.getElementById('new').insertBefore(newRow);
}
body {
    padding: 50px;
    font-family: sans-serif;
}

table, th, td {
    border: 1px solid #000;
    border-collapse: collapse;
}

th, td {
    padding: 15px;
}

th {
    text-transform: capitalize;
}

#new {
    text-align: center;
    font-weight: bold;
}

#new:hover {
    cursor: pointer;
    background-color: grey;
    color: #fff;
}
<table>
  <tbody>
    <tr>
      <th>title</th>
      <th>multiple</th>
      <th>required</th>
      <th>special</th>
    </tr>
    <tr>
      <td>Bar</td>
      <td>✔</td>
      <td>✔</td>
      <td>✔</td>
    </tr>
    <tr>
      <td>Foo</td>
      <td>✔</td>
      <td></td>
      <td>✔</td>
    </tr>
    <tr>
      <td id="new" colspan="6" onClick="addRow">ADD NEW SETTING</td>
    </tr>
  </tbody>
</table>

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

Ответы [ 2 ]

3 голосов
/ 05 июня 2019

Вы можете использовать insertAdjacentHTML: 

function addRow() {
  let newRow = '<tr><td>Boo</td><td>✔</td><td></td><td>✔</td></tr>';
  document.getElementById('new').parentElement.insertAdjacentHTML('beforebegin', newRow)
}
body {padding: 50px; font-family: sans-serif;}
table, th, td {border: 1px solid #000; border-collapse: collapse;}
th, td {padding: 15px;}
th {text-transform: capitalize;}
#new {text-align: center; font-weight: bold;}
#new:hover {cursor: pointer; background-color: grey; color: #fff;}
<table>
  <tbody>
    <tr>
      <th>title</th><th>multiple</th><th>required</th><th>special</th>
    </tr>
    <tr>
      <td>Bar</td><td>✔</td><td>✔</td><td>✔</td>
    </tr>
    <tr>
      <td>Foo</td><td>✔</td><td></td><td>✔</td>
    </tr>
    <tr>
      <td id="new" colspan="6" onClick="addRow()">ADD NEW SETTING</td>
    </tr>
  </tbody>
</table>
  • Я просто удаляю разрывы строк в html и css, чтобы уменьшить высоту ответа, содержимое одинаковое.
0 голосов
/ 05 июня 2019

Как @Teemu предложил, лучше использовать HTMLTable Interface вместо использования строк HTML: 

function addRow() {
  const table = document.getElementById('dictionary');
  
  let text = ['Boo', undefined, '✔', '✔'];
  let row = table.insertRow(table.rows.length-1);
  
  for (let i = 0; i < table.rows[0].cells.length; i++) {
    row.insertCell(-1).textContent = text[i] || '';
  }
 }
body {padding: 50px; font-family: sans-serif;}
table, th, td {border: 1px solid #000; border-collapse: collapse;}
th, td {padding: 15px;}
th {text-transform: capitalize;}
#new {text-align: center; font-weight: bold;}
#new:hover {cursor: pointer; background-color: grey; color: #fff;}
<table>
  <tbody id="dictionary">
    <tr>
      <th>title</th><th>multiple</th><th>required</th><th>special</th>
    </tr>
    <tr>
      <td>Bar</td><td>✔</td><td>✔</td><td>✔</td>
    </tr>
    <tr>
      <td>Foo</td><td>✔</td><td></td><td>✔</td>
    </tr>
    <tr>
      <td id="new" colspan="6" onClick="addRow()">ADD NEW SETTING</td>
    </tr>
  </tbody>
</table>

Если быстрый и грязный вариант подходит для вашего проекта, см. Ответ ниже - он работает просто отлично.

...