Question

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

我有一张桌子：

它由行和列组成，其中有输入，在每行的对面右侧有一个按钮-删除**-row**行，在每列底部下方有一个按钮-删除{ {1}}列。通过单击特定行对面的按钮来帮助删除行，以及单击特定列下的按钮来帮助删除列。

**-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() {
    //
};

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

最重要的部分是在创建列或创建行上添加新输入以及删除功能的地方。

删除JS行和列

1 个答案: