learning-table-element/app.js

function allowDrop(ev) {
  ev.preventDefault();
}
function dragcol(ev) {
  var data = ev.dataTransfer.setData("Text", ev.target.className);
}

function dropcol(ev) {
  var count = 0;
  ev.preventDefault();
  var data = ev.dataTransfer.getData("Text");
  var parentdiv = ev.target.parentNode;
  var newnode = document.getElementsByClassName(data);

  //locate which element to land  output number
  for (var each of parentdiv.children) {
    if (each === ev.target) {
      render(count);
    } else {
      count += 1;
    }
  }
  function render() {
    for (var each of newnode) {
      each.parentNode.insertBefore(each, each.parentNode.children[count]);
    }
  }
}
var classes = [
  "客户",
  "番茄酱",
  "海鲜粉",
  "酱油",
  "麻油",
  "牛奶",
  "苹果汁",
  "盐",
  "番茄酱a",
  "海鲜粉a",
  "酱油a",
  "麻油a",
  "牛奶a",
  "苹果汁a",
  "盐a"
];

var rows = document.getElementsByClassName("row");
//set all neccessary class for each table data
function setrowclass() {
  for (var row of rows) {
    var count = 0;
    for (var td of row.children) {
      td.setAttribute("class", classes[count]);
      count += 1;
    }
  }
}

//set class and methods for ingrdient titles
var ingredient_title = document.getElementById("ingredient-title");
function setingtitleclass() {
  var count = 0;
  for (var th of ingredient_title.children) {
    th.setAttribute("class", classes[count]);
    th.setAttribute("draggable", "true");
    th.setAttribute("ondragstart", "dragcol(event)");
    count += 1;
  }
}

function addrowandcol() {
  var submitbtn = document.getElementById("submit");

  submitbtn.addEventListener("click", function(e) {
    var tr = document.createElement("tr");
    tr.setAttribute("class", "row");
    var rowvalue = document.getElementById("row").value;
    var colvalue = document.getElementById("col").value;
    var td = document.createElement("td");
    e.preventDefault();

    //document.getElementById("main_table").lastChild.appendChild(tr);

    for (var i = 0; i < rowvalue; i++) {
      document.getElementById("main_table").lastChild.appendChild(tr);
      for (var x = 0; x < colvalue; x++) {
        // document
        //   .getElementById("main_table")
        //   .lastChild.lastChild.appendChild(td);
      }
    }
    console.log(document.getElementById("main_table").lastChild);
  });
}
addrowandcol();
setrowclass();
setingtitleclass();

// function allowDrop(ev) {
//   ev.preventDefault();
// }
// function dragcol(ev) {
//   var data = ev.dataTransfer.setData("Text", ev.target.className);
// }

// function dropcol(ev) {
//   var count = 0;
//   ev.preventDefault();
//   var data = ev.dataTransfer.getData("Text");
//   var parentdiv = ev.target.parentNode;
//   var newnode = document.getElementsByClassName(data);

//   //locate which element to land  output number
//   for (var each of parentdiv.children) {
//     if (each === ev.target) {
//       console.log(count);
//       render(count);
//     } else {
//       count += 1;
//     }
//   }
//   function render() {
//     for (var each of newnode) {
//       each.parentNode.insertBefore(each, each.parentNode.children[count]);
//     }
//   }
// }