атрибут длины таблицы, преобразованный в строку, ничего не возвращает

Question

Я пытался выяснить эту ошибку в течение некоторого времени, и я не могу найти что-нибудь об этом в Интернете.

Чего я ожидаю:

При нажатии кнопки создания строки создается новая строка внизу таблицы. Ряд имеет три ячейки. Первый - это индекс, второй - «Новая 1», а третий - «Новая 2».

Что происходит:

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

function myCreateFunction() {
  var table = document.getElementById("myTable");
  var row = table.insertRow(table.rows.length);
  var cell1 = row.insertCell(0);
  var cell2 = row.insertCell(1);
  var cell3 = row.insertCell(2);
  var test = table.rows.length.toString()
  cell2.innerHTML = test.toString()
  console.log(test)
  cell2.innerHTML = " NEW 1 ";
  cell3.innerHTML = " NEW 2 ";
}

function myDeleteFunction() {
  document.getElementById("myTable").deleteRow(document.getElementById("myTable").rows.length - 1);
}

table,
td {
  border: 1px solid black;
}

<p>Click the buttons to create and delete row(s) for the table.</p>

<button onclick="myCreateFunction()">Create row</button>
<button onclick="myDeleteFunction()">Delete row</button>

<p/>

<form>

  <table id="myTable">
    <tr>
      <td> 1 </td>
      <td> NEW 1 </td>
      <td> NEW 2 </td>
    </tr>
  </table>
  <br>

</form>

Я уверен, что делаю что-то не так, чего просто не вижу. Если бы кто-нибудь мог помочь пролить свет на мою проблему, это было бы замечательно. Заранее спасибо.

javascript html html-table

1

West 20 Авг 2018 в 17:00

Answer 1

cell1.innerHTML = test;     
cell2.innerHTML = " NEW 1 ";
cell3.innerHTML = " NEW 2 ";

Так же просто, как это

1

Dinosan0908 20 Авг 2018 в 14:06

Answer 2

Вы не устанавливаете значение cell1.

На самом деле ваша проблема в том, что вы вставляете индекс в cell2 вместо cell1, поэтому cell1 всегда пуст.

Просто измените эту строку:

cell2.innerHTML = test.toString();

Кому:

cell1.innerHTML = test;

<Сильные> Демо:

function myCreateFunction() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(table.rows.length);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var test = table.rows.length.toString()
    cell1.innerHTML = test;
    console.log(test)
    cell2.innerHTML = " NEW 1 ";
    cell3.innerHTML = " NEW 2 ";
}

function myDeleteFunction() {
    document.getElementById("myTable").deleteRow(document.getElementById("myTable").rows.length-1);
}

table, td {
    border: 1px solid black;
}

<p>Click the buttons to create and delete row(s) for the table.</p>

<button onclick="myCreateFunction()">Create row</button>
<button onclick="myDeleteFunction()">Delete row</button>

<p/>

<form>

  <table id="myTable">
    <tr>
      <td> 1 </td>
      <td> NEW 1 </td>
      <td> NEW 2 </td>
    </tr>
  </table>
  <br>

</form>

1

cнŝdk 20 Авг 2018 в 14:06

Answer 3

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

+ Изменить

cell2.innerHTML = test.toString()

Чтобы

cell1.innerHTML = test;//you do not need to invoke toString() on a String

<!DOCTYPE html>
<html>
<head>
<style>
table, td {
    border: 1px solid black;
}
</style>
</head>
<body>

<p>Click the buttons to create and delete row(s) for the table.</p>

<button onclick="myCreateFunction()">Create row</button>
<button onclick="myDeleteFunction()">Delete row</button>

<p/>

<form>

  <table id="myTable">
    <tr>
      <td> 1 </td>
      <td> NEW 1 </td>
      <td> NEW 2 </td>
    </tr>
  </table>
  <br>

</form>

<script>
function myCreateFunction() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(table.rows.length);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var test = table.rows.length.toString()
    cell1.innerHTML = test;
    console.log(test)
    cell2.innerHTML = " NEW 1 ";
    cell3.innerHTML = " NEW 2 ";
}

function myDeleteFunction() {
    document.getElementById("myTable").deleteRow(document.getElementById("myTable").rows.length-1);
}
</script>

</body>
</html>

0

hev1 20 Авг 2018 в 14:09

атрибут длины таблицы, преобразованный в строку, ничего не возвращает

3 ответа

Похожие вопросы

Новые вопросы

javascript