javascript - 如何使用选择选项在javascript中制作动态表格列

Question

如果老师使用 JavaScript 选择项目 (4) 怎么办，

如您所见，表格行调整，这取决于用户选择的项目，

请帮帮我

这是示例：

如果用户选择项目 (3)

这是我的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>

标签： javascriptdjango

Answer 1

首先，我们this.value传入myFunction.

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

接下来，我们添加id="headerRow"到标题行。

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

然后，我们实现configureRow(row, numItems, innerHTMLFunc)插入和删除单元格。

最后，我们调用configureRow.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>