CODEWITHSUNDEEP
javascripthtmlhtml-table
West
West

Reputation: 70

table length attribute converted to string returns nothing

I've been trying to figure out this bug for a little while now and I cannot find anything about it online.

What I expect to happen:

When the create row button is pressed is that a new row is created at the bottom of the table. The row has three cells. The first is the index, the second is " New 1 " and the third is " New 2 ".

What is happening:

That I do not want to happen is that the first cell in new rows appears empty. Inspecting it shows that it actually has no content. Saving the string to a variable then adding it to the inner html of a cell does not work either. However if I log that variable to the console it does print the correct index.

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>

I'm sure I'm doing something wrong that I'm just not seeing. If anyone could help shed light on my issue that would be wonderful. Thank you in advance.

Upvotes: 2

Views: 49

Answers (3)

Unmitigated
Unmitigated

Reputation: 89404

You never set the innerHTML of the first inserted cell. You must have forgotten to set the innerHTML of the first cell and instead set the innerHTML of the second cell twice.

Change 

cell2.innerHTML = test.toString()

To

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>

Upvotes: 0

cнŝdk
cнŝdk

Reputation: 32145

You are not setting any value to cell1.

In fact your problem is that you are inserting the index in the cell2 instead of cell1, so cell1 is always empty.

Just change this line:

cell2.innerHTML = test.toString();

To:

cell1.innerHTML = test;

Demo:

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>

Upvotes: 1

Dinosan0908
Dinosan0908

Reputation: 1102

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

As simply as that

Upvotes: 2

Related Questions