创建可插入/删除行和列的动态表

Question

（HTML）表应具有以下功能。

1. 创建一个包含选定行数和列数的表
2. 右键单击任何单元格应该提供创建/删除选项，相应的单元格行/列。
3. 应该能够在以前创建的行/列上创建新的行/列。

Answer 1

＆＃13;

＆＃13;

$(document).ready(function() {
  var i = 0,
    j = 0;
  var tableId, tableRowId;
  var selectedItem;
  document.oncontextmenu = function() {
    return false;
  };

  function createTable() {
    i++;
    var rn = window.prompt("Input number of rows", '1');
    var cn = window.prompt("Input number of columns", '1');
    tableId = "table" + i;
    console.log(tableId + " created");
    var tableTag = document.createElement('table');
    tableTag.setAttribute("id", tableId);
    tableTag.setAttribute('name', rn + "*" + cn);
    tableTag.style.borderCollapse = "collapse";

    for (var r = 0; r < parseInt(rn, 10); r++) {
      ++j;
      tableRowId = tableId + j;
      $('#editor').append(tableTag);
      var x = tableTag.insertRow();
      x.setAttribute("id", tableRowId);
      for (var c = 0; c < parseInt(cn, 10); c++) {
        var y = x.insertCell(c);
        y.style.fontSize = "12px";
        y.style.border = "solid 1px black";
        y.style.padding = "5px";
        y.style.width = "15px";
        y.style.height = "30px";
        y.innerHTML = (r) + "*" + (c);
        y.setAttribute("tableID", tableId);
        y.setAttribute("id", "row" + c + tableRowId);
      }
    }
  }
  $("#tableCreator").on("click", function() {
    createTable();
  });
  $("#editor").on('click', 'td', function(e) {
    console.log("row number is " + $(this).attr("rowNo"));
    console.log("Column number is " + $(this).attr("columnNo"));
    console.log($(this).parent().attr("id"));
    selectedItem = $(this);
    $('#popup').show();
    $('#popup').offset({
      top: e.pageY,
      left: e.pageX
    }).fadeIn(1000);
  })
  $("#editor").on('mousedown', 'td', function(e) {
    selectedItem = $(this);
    if (e.button == 2) {
      $('#popup').show();
      $('#popup').offset({
        top: e.pageY,
        left: e.pageX
      }).fadeIn(1000);
    }
  })
  var newRowNo = 0;
  $("#addRow").click(function() {
    var table = document.getElementById(selectedItem.attr("tableID"));
    var rowLength = (selectedItem.parent().children().length);
    var colLength = (selectedItem.parent().parent().children().length);

    var selectedRowNumber
    var rows = selectedItem.parent().parent().children();
    for (var i = 0; i < colLength; i++) {
      if (rows[i].id == selectedItem.parent().attr("id")) {
        selectedRowNumber = i;
        console.log(selectedRowNumber);
      }
    }
    // var table = selectedItem.parent().parent().parent();
    var newRow = table.insertRow(selectedRowNumber);
    tableRowId = selectedItem.parent().attr("id") + "n" + (++newRowNo);
    newRow.setAttribute("id", tableRowId);
    for (var c = 0; c < rowLength; c++) {
      var y = newRow.insertCell(c);
      y.style.fontSize = "12px";
      y.style.border = "solid 1px black";
      y.style.padding = "5px";
      y.style.width = "15px";
      y.style.height = "30px";
      y.innerHTML = " ";
      y.setAttribute("id", "row" + c + tableRowId);
      y.setAttribute("tableID", (selectedItem).attr("tableID"))
    }
    $('#popup').hide();
  })
  $("#delRow").click(function() {
    var rows = selectedItem.parent().parent().children();
    var colLength = (selectedItem.parent().parent().children().length);
    var selectedRowNumber;
    for (var i = 0; i < colLength; i++) {
      console.log(rows[i].id);
      console.log("selected item" + selectedItem.parent().attr("id"));
      if (rows[i].id == selectedItem.parent().attr("id")) {
        selectedRowNumber = i;
        console.log(selectedRowNumber);
      }
      $('#popup').hide();
    }
    var table = document.getElementById(selectedItem.attr("tableID"));
    var newRow = table.deleteRow(selectedRowNumber);
  })
  var newColNo = 0;
  $("#addCol").click(function() {
    var table = document.getElementById(selectedItem.attr("tableID"));
    var colLength = (selectedItem.parent().parent().children().length);
    var rowLength = (selectedItem.parent().children().length);
    console.log(selectedItem.parent().children());

    var columns = selectedItem.parent().children();
    var selectedColNumber;
    for (var i = 0; i < rowLength; i++) {
      if (columns[i].id == selectedItem.attr("id")) {
        selectedColNumber = i;
        console.log(selectedColNumber);
      }
    }
    for (var c = 0; c < colLength; c++) {
      var row = table.children[0].children[c]
      var y = row.insertCell(selectedColNumber);
      y.style.fontSize = "12px";
      y.style.border = "solid 1px black";
      y.style.padding = "5px";
      y.style.width = "15px";
      y.style.height = "30px";
      y.innerHTML = " "; //(c+0.1)+"*"+(selectedItem.attr("columnNo")+0.1);
      y.setAttribute("id", "row" + c + tableRowId + (++newColNo));
      //     y.setAttribute("rowNO",(c+0.1));
      //     y.setAttribute("columnNo",(0.1+selectedItem.attr("columnNo")));
      y.setAttribute("tableID", selectedItem.attr("tableID"));
    }
    $('#popup').hide();
  })
  $("#delCol").click(function() {
    var table = document.getElementById(selectedItem.attr("tableID"));
    var colLength = (selectedItem.parent().parent().children().length);
    var rowLength = (selectedItem.parent().children().length);
    console.log(selectedItem.parent().children());
    var columns = selectedItem.parent().children();
    var selectedColNumber;
    for (var i = 0; i < rowLength; i++) {
      if (columns[i].id == selectedItem.attr("id")) {
        selectedColNumber = i;
        console.log(selectedColNumber);
      }
    }
    for (var c = 0; c < colLength; c++) {
      var row = table.children[0].children[c]
      var y = row.deleteCell(selectedColNumber);
    }
    $('#popup').hide();
  })
});

＆＃13;

#popup {
  display: none;
  z-index: 5;
  background-color:white;
}

＆＃13;

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<button id="tableCreator">
        Create Table
    </button>
<div id="editor"></div>
<div id="popup">
  <div class="popupcontent" id="addRow">Add Row</div>
  <div class="popupcontent" id="delRow">Delete Row</div>
  <div class="popupcontent" id="addCol">Add Column</div>
  <div class="popupcontent" id="delCol">Delete column</div>
</div>

＆＃13;

＆＃13;

＆＃13;