Question

78

Input in HTML Table

rated 0 times [ 81] [ 3] / answers: 1 / hits: 23461 / 8 Years ago, thu, july 7, 2016, 12:00:00

I used a form and some JavaScript to take data from an uploaded CSV file and created an HTML table based on that data. In addition, I added an extra column for user input. My issues is that I cannot figure out a manageable way to take the user input at each input tag and replace the input tag with the text they entered.

Code

This is the code behind the table. When I implement it, there will not be a finite number of rows though. Instead the amount of rows will be based on the data from the CSV file.

var table = document.createElement('table');

table.classList.add('table');



var thead = document.createElement('thead');

var headRow = document.createElement('tr');

var columnNames = [Col1, Col2, Col3, Col4];



for (var i = 0; i < 4; i++) {

  var th = document.createElement('th');

  th.appendChild(document.createTextNode(columnNames[i]));

  headRow.appendChild(th);

}



thead.appendChild(headRow);



var tbody = document.createElement('tbody');



for (var i = 0; i < 10; i++) {

  var tr = document.createElement('tr');



  for (var j = 0; j < 4; j++) {

    var td = document.createElement('td');



    if (j == 3) {

      td.classList.add(input);

      var input = document.createElement('input');

      input.type = text;

      td.appendChild(input);

      tr.appendChild(td);

      continue;

    }

    td.appendChild(document.createTextNode(x));

    tr.appendChild(td);

  }



  tbody.appendChild(tr);

}



table.appendChild(thead);

table.appendChild(tbody);

document.body.appendChild(table);

td { width: 25vw; }

<link href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css rel=stylesheet/>

Table Example

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ryanulyssesb

Add To Favorites

Follow

Total Points: 91

Total Questions: 105

Total Answers: 102

Location: England

Member since Tue, Sep 8, 2020

4 Years ago

ryanulyssesb questions

1 Vue 3: `defineProps` are referencing locally declared variables

Sat, Nov 13, 21, 00:00, 3 Years ago

1 How to put file path in package.json file

Sat, Mar 20, 21, 00:00, 3 Years ago

1 How to test dynamic imports (then and catch) with Jest

Mon, Sep 14, 20, 00:00, 4 Years ago

1 Sending data from Python to Javascript using EEL

Mon, Mar 9, 20, 00:00, 4 Years ago

1 SyntaxError: Unexpected token / in JSON at position 132

Sun, Jul 7, 19, 00:00, 5 Years ago

View All

answered 8 Years ago taliac · Accepted Answer

You can toggle the cells between input and text cells by doing the following.

function toggleInputCells(button) {

  var cells = document.getElementsByClassName('input');

  

  for (var i = 0; i < cells.length; i++) {

    var cell = cells[i];

    var input = cell.getElementsByTagName('input')[0];



    if (input != null) {

      var text = input.value;

      cell.innerHTML = text;

    } else {

      var text = cell.innerHTML;

      cell.innerHTML = '';

      var input = document.createElement('input');

      input.type = text;

      input.value = text;

      cell.appendChild(input);

    }

  }

}





var rows = 10;

var cols = 4;



var table = document.createElement('table');

table.classList.add('table');



var thead = document.createElement('thead');

var headRow = document.createElement('tr');

var columnNames = [Col1, Col2, Col3, Col4];



for (var i = 0; i < 4; i++) {

  var th = document.createElement('th');

  th.appendChild(document.createTextNode(columnNames[i]));

  headRow.appendChild(th);

}



thead.appendChild(headRow);



var tbody = document.createElement('tbody');



for (var i = 0; i < rows; i++) {

  var tr = document.createElement('tr');



  for (var j = 0; j < cols; j++) {

    var td = document.createElement('td');



    if (j == 3) {

      td.classList.add(input);

      var input = document.createElement('input');

      input.type = text;

      input.value = 'Row #' + (i + 1); // Add a value?

      td.appendChild(input);

      tr.appendChild(td);

      continue;

    }

    td.appendChild(document.createTextNode(x));

    tr.appendChild(td);

  }



  tbody.appendChild(tr);

}



table.appendChild(thead);

table.appendChild(tbody);

document.body.appendChild(table);

td { width: 25vw; }

<link href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css rel=stylesheet/>



<input type=button value=Toggle Input onClick=toggleInputCells(this) />

You could also listen to when the user clicks down on the cell and convert it to an input. After they leave focus, you can convert it back into a regular text cell.

function makeEditable(e) {

  var cell = e.target;

  if (cell.dataset.editing !== 'true') {

    cell.dataset.editing = true;

    var text = cell.innerHTML;

    cell.innerHTML = '';

    var input = document.createElement('input');

    input.addEventListener('blur', makeNonEditable);

    input.type = text;

    input.value = text;

    cell.appendChild(input);

  }

}



function makeNonEditable(e) {

  var input = e.target;

  var text = input.value;

  var cell = input.parentElement;

  if (cell.dataset.editing === 'true') {

    cell.dataset.editing = false;

    cell.innerHTML = text;

  }

}



var rows = 10;

var cols = 4;



var table = document.createElement('table');

table.classList.add('table');



var thead = document.createElement('thead');

var headRow = document.createElement('tr');

var columnNames = [Col1, Col2, Col3, Col4];



for (var i = 0; i < 4; i++) {

  var th = document.createElement('th');

  th.appendChild(document.createTextNode(columnNames[i]));

  headRow.appendChild(th);

}



thead.appendChild(headRow);



var tbody = document.createElement('tbody');



for (var i = 0; i < rows; i++) {

  var tr = document.createElement('tr');



  for (var j = 0; j < cols; j++) {

    var td = document.createElement('td');



    if (j == 3) {

      td.addEventListener('mousedown', makeEditable); // Add mousedown listener.

      td.innerHTML = 'Row #' + (i + 1);               // Add a value?

      tr.appendChild(td);

      continue;

    }

    td.appendChild(document.createTextNode(x));

    tr.appendChild(td);

  }



  tbody.appendChild(tr);

}



table.appendChild(thead);

table.appendChild(tbody);

document.body.appendChild(table);

td { width: 25vw; }

<link href=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css rel=stylesheet/>