CODEWITHSUNDEEP
javascripthtmlcss
Danial Farhan
Danial Farhan

Reputation: 33

How do I enter text into a cell in a table in HTML?

I'm trying to make a table where the user can enter text into each cell of the table. There are also rows that you can add with a button and I would need text to be enterable into those cells as well. I would also need to add up the assignment columns to get the average of all assignments which would automatically be entered into the average (%) column. The code segment includes my HTML, JS, and CSS.

function addRow() {
  var table = document.getElementById("tb");
  var tableLength = 5;
  var row = table.insertRow(tableLength);
  tableLength++;
  var cell0 = row.insertCell(0);
  var cell1 = row.insertCell(1);
  var cell2 = row.insertCell(2);
  var cell3 = row.insertCell(3);
  var cell4 = row.insertCell(4);
  var cell5 = row.insertCell(5);
  var cell6 = row.insertCell(6);
  var cell7 = row.insertCell(7);
  cell0.innerHTML = "-";
  cell1.innerHTML = "-";
  cell2.innerHTML = "-";
  cell3.innerHTML = "-";
  cell4.innerHTML = "-";
  cell5.innerHTML = "-";
  cell6.innerHTML = "-";
  cell7.innerHTML = "-";
}
.centered {
    text-align: center;
}

.button {
    position: center;
    font-size: 15px;
}
<!DOCTYPE html>
<html>

  <head>

    <title>Assignment 2</title>
    <link rel="stylesheet" href="Assignment-03.css">
    <script src="Assignment-03.js"></script>

    <style>
      table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 100%;
      }

      td{
        border: 1px solid black;
        text-align: left;
        padding: 8px;
        height: 20px;
      }

      th{
        border: 1px solid black;
        text-align: center;
        padding: 8px;
        height: 20px;
        background-color: #a6a6a6;
      }

      tr:nth-child(even) {
        background-color: #dddddd;
      }
    </style>
  </head>

  <body>

    <table id = "tb">
      <tr>
        <th>Student Name</th>
        <th>Student ID</th>
        <th>Assignment 1</th>
        <th>Assignment 2</th>
        <th>Assignment 3</th>
        <th>Assignment 4</th>
        <th>Assignment 5</th>
        <th>Average (%)</th>
      </tr>
      <tr>
        <td>-</td>
        <td>-</td>
        <td style = "text-align: center;">-</td>
        <td style = "text-align: center;">-</td>
        <td style = "text-align: center;">-</td>
        <td style = "text-align: center;">-</td>
        <td style = "text-align: center;">-</td>
        <td>-</td>
      </tr>
      <tr>
        <td>-</td>
        <td>-</td>
        <td style = "text-align: center;">-</td>
        <td style = "text-align: center;">-</td>
        <td style = "text-align: center;">-</td>
        <td style = "text-align: center;">-</td>
        <td style = "text-align: center;">-</td>
        <td>-</td>
      </tr>
      <tr>
        <td>-</td>
        <td>-</td>
        <td style = "text-align: center;">-</td>
        <td style = "text-align: center;">-</td>
        <td style = "text-align: center;">-</td>
        <td style = "text-align: center;">-</td>
        <td style = "text-align: center;">-</td>
        <td>-</td>
      </tr>
      <tr>
        <td>-</td>
        <td>-</td>
        <td style = "text-align: center;">-</td>
        <td style = "text-align: center;">-</td>
        <td style = "text-align: center;">-</td>
        <td style = "text-align: center;">-</td>
        <td style = "text-align: center;">-</td>
        <td>-</td>
      </tr>
    </table>

    <br>

    <div class = "centered">
      <button class = "button" type="button" onclick="addRow()">Add Row</button>
    </div>

  </body>
</html>

Upvotes: 0

Views: 250

Answers (1)

T J
T J

Reputation: 43156

Try using contentEditable like cell.contentEditable = 'true'

You can find a more detailed guide here: Making content editable

Upvotes: 2

Related Questions