删除 JS 行和列

Question

大家好。如何删除选定的行或选定的列？

我有一张桌子：

它由有输入的行和列组成，在每行对面的右侧有一个按钮 - 删除**-row** 行，每列底部下方有一个按钮 - 删除**-col**柱子。通过单击特定行对面的按钮来帮助删除行，并通过单击特定列下的按钮来删除列。

let array1 = [];
let table1 = document.getElementById('tableOne');
let rows1, columns1;
let tableTfoot = document.getElementById('tableTfoot');

window.onload = function() {
  let get = function(id) {
    return document.getElementById(id);
  };

  //table initialization
  function createOne(arrayRows1, arrayColumns1) {
    [rows1, columns1] = [arrayRows1, arrayColumns1];

    for (let i = 0; i < arrayRows1; i++) {
      array1[i] = [];
      let row = table1.insertRow(-1);

      for (let j = 0; j < arrayColumns1; j++) {
        array1[i][j] = i + j;
        let cell = row.insertCell(-1);
        cell.innerHTML = "<input style='width: 50px; height: 50px; text-align: center;' type='text' class='firstTable'>";
      }
      //display of delete buttons on the right next to each line
      for (let i = 0; i < rows1; i++) {
        if (i + 1 === rows1) {
          let cell = row.insertCell(-1);
          cell.innerHTML = "<input style='width: 45px; height: 50px; text-align: center;' type='button' id='delRowsOne' value='-row'>";
        }
      }
    }

    //add line
    get('addRowsOne').onclick = function() {
      let row = table1.insertRow(rows1 - 1);
      array1[rows1] = [];

      for (let j = 0; j < columns1; j++) {
        array1[rows1][j] = rows1 + j;
        let cell = row.insertCell(-1);
        cell.innerHTML = "<input style='width: 50px; height: 50px; text-align: center;' type='text' class='firstTable'>";
      }
      //display of delete buttons on the right next to each line
      for (let i = 0; i < rows1; i++) {
        if (i + 1 === rows1) {
          let cell = row.insertCell(-1);
          cell.innerHTML = "<input style='width: 45px; height: 50px; text-align: center;' type='button' id='delRowsOne' value='-row'>";
        }
      }
      rows1++;
    };

    //add column
    get('addColumnsOne').onclick = function() {
      let tr = [...table1.querySelectorAll('tr')];

      array1.forEach(function(r, i) {
        r[r.length] = i + r.length;
        let cell = tr[i].insertCell(columns1);
        cell.innerHTML = "<input style='width: 50px; height: 50px; text-align: center;' type='text' class='firstTable'>";
      });
      columns1++;

      let columnButtonFirstTable = document.getElementById('columnButtonFirstTable');
      columnButtonFirstTable.style.marginLeft = columnButtonFirstTable.offsetLeft + 37 + 'px';

      //add buttons delete to bottom line
      let tr1 = [...tableTfoot.querySelectorAll('tr')];
      array1.forEach(function(r, i) {
        r[r.length] = i + r.length;
        let cell = tr1[i].insertCell(-1);
        cell.innerHTML = "<input id='delColumnsOne' type='button' value='-col' style='width: 50px;'>";
      });
      columns1++;
    };

    //row delete buttons
    get('delRowsOne').onclick = function() {
      //
    };

    //column delete buttons
    get('delColumnsOne').onclick = function() {
      //
    };
  }

  createOne(2, 2);
};

<div class="col-lg-6" style="float: left;">
  <div class="col-lg-12" id="columnButtonFirstTable" style="margin-left: 158px;">
    <input id="addColumnsOne" type="button" value="+" style="width: 30px;" />
  </div>
  <div class="col-lg-12">
    <table id="tableOne" style="margin-left:53px;"></table>
    <table id="tableTfoot" style="margin-left:21px;">
      <tfoot>
        <tr>
          <td><input id="addRowsOne" type="button" value="+" style="width: 30px;" /></td>
          <td><input type="button" value="-col" style="width: 50px;" id="delColumnsOne" /></td>
          <td><input type="button" value="-col" style="width: 50px;" id="delColumnsOne" /></td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>

删除行：

get('delRowsOne').onclick = function() {
    //
};

删除列：

get('delColumnsOne').onclick = function() {
    //
};

Answer 1

我对您的代码进行了一些更改，例如使用类而不是 id 来获取多个按钮，我还通过创建输入元素并在其中添加选择侦听器来添加输入，在这里您可以看到它是如何实现的终于找到我了，也许你可以试试看！

  let array1 = []
  let table1 = document.getElementById('tableOne')
  let rows1, columns1
  let tableTfoot = document.getElementById('tableTfoot')

  window.onload = function() {
    let get = function(id) {
      return document.getElementById(id)
    }

    //table initialization
    function createOne(arrayRows1, arrayColumns1) {
      ;[rows1, columns1] = [arrayRows1, arrayColumns1]

      for (let i = 0; i < arrayRows1; i++) {
        array1[i] = []
        let row = table1.insertRow(-1)

        for (let j = 0; j < arrayColumns1; j++) {
          array1[i][j] = i + j
          let cell = row.insertCell(-1)
          cell.innerHTML =
            "<input style='width: 50px; height: 50px; text-align: center;' type='text' class='firstTable'>"
        }
        //display of delete buttons on the right next to each line
        for (let i = 0; i < rows1; i++) {
          if (i + 1 === rows1) {
            let cell = row.insertCell(-1)
            cell.innerHTML =
              "<input style='width: 45px; height: 50px; text-align: center;' type='button' class='delRowsOne' value='-row'>"
          }
        }
      }

      //add line
      get('addRowsOne').onclick = function() {
        let row = table1.insertRow(rows1 - 1)
        array1[rows1] = []

        for (let j = 0; j < columns1; j++) {
          array1[rows1][j] = rows1 + j
          let cell = row.insertCell(-1)
          cell.innerHTML =
            "<input style='width: 50px; height: 50px; text-align: center;' type='text' class='firstTable'>"
        }
        //display of delete buttons on the right next to each line
        for (let i = 0; i < rows1; i++) {
          if (i + 1 === rows1) {
            let cell = row.insertCell(-1)
            let input = document.createElement('input')
            input.style = 'width: 45px; height: 50px; text-align: center;'
            input.type = 'button'
            input.class = 'delRowsOne'
            input.value = '-row'
            input.addEventListener('click', deleteRow)
            cell.appendChild(input)
          }
        }
        rows1++
      }

      //add column
      get('addColumnsOne').onclick = function() {
        let tr = [...table1.querySelectorAll('tr')]

        array1.forEach(function(r, i) {
          r[r.length] = i + r.length
          let cell = tr[i].insertCell(columns1)
          cell.innerHTML =
            "<input style='width: 50px; height: 50px; text-align: center;' type='text' class='firstTable'>"
        })
        columns1++

        let columnButtonFirstTable = document.getElementById(
          'columnButtonFirstTable'
        )
        columnButtonFirstTable.style.marginLeft =
          columnButtonFirstTable.offsetLeft + 37 + 'px'

        //add buttons delete to bottom line
        let tr1 = [...tableTfoot.querySelectorAll('tr')]
        array1.forEach(function(r, i) {
          r[r.length] = i + r.length
          let cell = tr1[i].insertCell(-1)
          let input = document.createElement('input')
          input.style = 'width: 45px;'
          input.type = 'button'
          input.class = 'delColumnsOne'
          input.value = '-col'
          input.addEventListener('click', deleteColumn)
          cell.appendChild(input)
        })
        columns1++
      }

      function deleteRow() {
        const whereRowIs = this.parentElement.parentElement.parentElement
        whereRowIs.removeChild(this.parentElement.parentElement)
        rows1--
      }

      function deleteColumn() {
        const whereColumnIs = this.parentElement.parentElement
        const allTds = whereColumnIs.querySelectorAll('td')
        const position = Array.from(allTds).indexOf(this.parentElement) - 1
        let rows = table1.querySelectorAll('tr')
        rows.forEach(row => {
          let tdsInRow = row.querySelectorAll('td')
          row.removeChild(tdsInRow[position])
        })

        whereColumnIs.removeChild(this.parentElement)
        columns1--
      }

      //row delete buttons
      //Need to add to all elements
      const delRowButtons = document.querySelectorAll('.delRowsOne')
      delRowButtons.forEach(delRowButton =>
        delRowButton.addEventListener('click', deleteRow)
      )

      //column delete buttons
      const delColButtons = document.querySelectorAll('.delColumnsOne')
      delColButtons.forEach(delColButton =>
        delColButton.addEventListener('click', deleteColumn)
      )
    }

    createOne(2, 2)
  }

最重要的部分是您在创建列或创建行以及删除函数上添加新输入的位置。