How to make dynamic table column in javascript using select option

Question

How to if the teacher select Items (4) using JavaScript,

as you can see, the table row adjust, it depends on what Items that the user selected,

please help me guys

here's the example:

if the user select Items (3)

here is my html

<table class="tableattrib" id="myTables">
      <tr>
        <td colspan="1" class="tdhead1">Class</td>
        <td colspan="20" class="tdcell">
          &nbsp;&nbsp;
          <select>
            <option>Grading Categories</option>
          </select>&nbsp;&nbsp;
          <select onchange="myFunction()">
            <option>Items</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
          </select>&nbsp;&nbsp;
          <select>
            <option>Section</option>
          </select>
        </td>
      </tr>
      <tr>
        <td class="tdnb" colspan="21"><input id="myInput" type="text" placeholder="Search Student" class="search"></td>
      </tr>
      <tr>
        <td colspan="1" class="tdhead">Student Name</td>
        <td class="tdcell1"><input type="text" name="" id="datepicker" placeholder="mm/dd/yyyy" title="Quiz Date"/></td>
        <td class="tdcell1"><input type="text" name="" id="datepicker1" placeholder="mm/dd/yyyy" title="Quiz Date"/></td>
        <td class="tdcell1"><input type="text" name="" id="datepicker2" placeholder="mm/dd/yyyy" title="Quiz Date"/></td>
        <td class="tdcell2">Average</td>
      </tr>
      <tbody id="myTable">
      <tr id="myRow">
        <td colspan="1" class="tdcell">Marvin Makalintal</td>
        <td class="tdcell1"><input type="text" name=""/></td>
        <td class="tdcell1"><input type="text" name=""/></td>
        <td class="tdcell1"><input type="text" name=""/></td>
        <td class="tdcell1"><input type="text" name=""/></td>

      </tr>
       <tr>
        <td class="tdbtn" colspan="21"><button type="button" class="save">&plus;&nbsp;Save</button>
          &nbsp;<button type="button" class="save">&check;&nbsp;Finalize</button></td>
      </tr>
    </tbody>
  </table>
</body>
<script>
function myFunction() {
  var row = document.getElementById("myRow");
  var x = row.insertCell(1);
  x.innerHTML = "New cell";
}
</script>

aaron · Accepted Answer · 2019-12-06 18:20:44Z

First, we pass this.value into myFunction.

- <select onchange="myFunction()">
+ <select onchange="myFunction(this.value)">

Next, we add id="headerRow" to the header row.

- <tr>
+ <tr id="headerRow">
    <td colspan="1" class="tdhead">Student Name</td>

Then, we implement configureRow(row, numItems, innerHTMLFunc) to insert and delete cells.

Finally, we call configureRow in myFunction.

function configureRow(row, numItems, innerHTMLFunc) {
  var numCells = numItems + 2;

  while (row.childElementCount < numCells) {
    var x = row.insertCell(row.childElementCount - 1);
    x.innerHTML = innerHTMLFunc(row.childElementCount - 2);
  }

  while (row.childElementCount > numCells) {
    row.deleteCell(row.childElementCount - 2);
  }
}

function myFunction(numItems) {
  numItems = Number(numItems);

  var row = document.getElementById("headerRow");
  configureRow(row, numItems, (itemNum) => `<td class="tdcell1"><input type="text" name="" id="datepicker${itemNum - 1 || ''}" placeholder="mm/dd/yyyy" title="Quiz Date" /></td>`);

  var row = document.getElementById("myRow");
  configureRow(row, numItems, (itemNum) => '<td class="tdcell1"><input type="text" name=""></td>');
}

<table class="tableattrib" id="myTables">
  <tr>
    <td colspan="1" class="tdhead1">Class</td>
    <td colspan="20" class="tdcell">
      &nbsp;&nbsp;
      <select>
        <option>Grading Categories</option>
      </select>&nbsp;&nbsp;
      <select onchange="myFunction(this.value)">
        <option>Items</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
      </select>&nbsp;&nbsp;
      <select>
        <option>Section</option>
      </select>
    </td>
  </tr>
  <tr>
    <td class="tdnb" colspan="21"><input id="myInput" type="text" placeholder="Search Student" class="search"></td>
  </tr>
  <tr id="headerRow">
    <td colspan="1" class="tdhead">Student Name</td>
    <td class="tdcell1"><input type="text" name="" id="datepicker" placeholder="mm/dd/yyyy" title="Quiz Date" /></td>
    <td class="tdcell1"><input type="text" name="" id="datepicker1" placeholder="mm/dd/yyyy" title="Quiz Date" /></td>
    <td class="tdcell1"><input type="text" name="" id="datepicker2" placeholder="mm/dd/yyyy" title="Quiz Date" /></td>
    <td class="tdcell2">Average</td>
  </tr>
  <tbody id="myTable">
    <tr id="myRow">
      <td colspan="1" class="tdcell">Marvin Makalintal</td>
      <td class="tdcell1"><input type="text" name="" /></td>
      <td class="tdcell1"><input type="text" name="" /></td>
      <td class="tdcell1"><input type="text" name="" /></td>
      <td class="tdcell1"><input type="text" name="" /></td>
    </tr>
    <tr>
      <td class="tdbtn" colspan="21"><button type="button" class="save">&plus;&nbsp;Save</button> &nbsp;
        <button type="button" class="save">&check;&nbsp;Finalize</button></td>
    </tr>
  </tbody>
</table>

Jin Thakur · Accepted Answer · 2019-12-10 15:54:12Z

    <!DOCTYPE html>
<html>
<head></head>
<body>
    <script>
        function myFunction() {
            alert(selectionnumber);
            var intselectionnumber = 0;
            intselectionnumber =document.getElementById("selectionnumber").value;
            alert(intselectionnumber);
            var table = document.getElementById("mytab1");
            for (var i = 0, row; row = table.rows[i] ; i++) {
                //iterate through rows
                //rows would be accessed using the "row" variable assigned in the for loop
                for (var j = 0, col; col = row.cells[j]; j++) {
                    if (j == 1) {
                        for ( k = 1; k <= intselectionnumber; k++)
                        {
                            var x = row.insertCell(j);
                            x.innerHTML = "<input type='text' name='' id='datepicker2' placeholder='mm/dd/yyyy' title='Quiz Date'/>";
                        }

                    }
                }
            }
        }
    </script>
    <h1>The onclick Event</h1>

    <table class="tableattrib" id="myTables">
        <tr>
            <td colspan="1" class="tdhead1">Class</td>
            <td colspan="20" class="tdcell">
                &nbsp;&nbsp;
                <select>
                    <option>Grading Categories</option>
                </select>&nbsp;&nbsp;
                <select id='selectionnumber' onchange="myFunction();">
                    <option value="0">Items</option>
                    <option value="1" selected='selected'>1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>&nbsp;&nbsp;
                <select>
                    <option>Section</option>
                </select>
            </td>
        </tr>
    </table>
    <table id='mytab1'>
        <tr>
            <td class="tdnb" colspan="21"><input id="myInput" type="text" placeholder="Search Student" class="search"></td>
        </tr>
        <tr>
            <td colspan="1" class="tdhead">Student Name</td>

            <td class="tdcell2">Average</td>
        </tr>

        <tr id="myRow">
            <td colspan="1" class="tdcell">Marvin Makalintal</td>

            <td class="tdcell1"><input type="text" name="" /></td>

        </tr>
        <tr>
            <td class="tdbtn" colspan="21">
                <button type="button" class="save">&plus;&nbsp;Save</button>
                &nbsp;<button type="button" class="save">&check;&nbsp;Finalize</button>
            </td>
        </tr>

    </table>


</body>
</html>

Collectives™ on Stack Overflow

How to make dynamic table column in javascript using select option

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related