Breaking News: Grepper is joining You.com. Read the official announcement!

Input in HTML Table

Witty Wryneck answered on April 26, 2022 Popularity 9/10 Helpfulness 2/10

answer Input in HTML Table

Input in HTML Table

Comment

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);

Popularity 9/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: html-table input javascript

Link to this answer
Share Copy Link

Contributed on Apr 26 2022

Witty Wryneck

0 Answers Avg Quality 2/10

Input in HTML Table

Contents

More Related Answers

Input in HTML Table

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.