javascript - 在 Javascript onclick 中删除行

Question

当我单击“删除行”时，它应该删除整行，保持插槽为空，以便我稍后可以在该行中填写详细信息。我尝试创建点击事件，但不知道如何创建空行。

jsfiddle

 var cell1;
 var cell2;
 var cell3;
 var cell4;

 var m = document.querySelector('#inputvechnumber');

 document.querySelector('#vech').addEventListener('click', function () {
     for (var i = 0; i < m.value; i++) {
         console.log(i);
         var numberplatefour = Math.floor(Math.random() * 8800) + 1001;
         var numberplatetwo = Math.floor(Math.random() * 90) + 10;
         var nplate = "KA" + "-" + numberplatetwo + "-" + numberplate() + "-" + numberplatefour;
         var table = document.querySelector('.table')
         var row = table.insertRow(0);

         cell1 = row.insertCell(0);
         cell2 = row.insertCell(1);
         cell3 = row.insertCell(2);
         cell4 = row.insertCell(3);

         cell1.innerHTML = nplate;
         cell2.innerHTML = carcolor();
         cell3.innerHTML = 'slot' + i;
         cell4.innerHTML = "REMOVE ROW";
     }
 })

Answer 1

你需要一点CSS来让你的问题更清楚，看看这个，这是你想要的吗？运行这个演示，你会看到

var cell1;
var cell2;
var cell3;
var cell4;


var m = document.querySelector('#inputvechnumber');

document.querySelector('#vech').addEventListener('click', function() {

  for (var i = 0; i < m.value; i++) {



    console.log(i);
    var numberplatefour = Math.floor(Math.random() * 8800) + 1001;

    var numberplatetwo = Math.floor(Math.random() * 90) + 10;


    var nplate = "KA" + "-" + numberplatetwo + "-" + numberplate() + "-" + numberplatefour;

    var table = document.querySelector('.table')
    var row = table.insertRow(0);
    cell1 = row.insertCell(0);
    cell2 = row.insertCell(1);
    cell3 = row.insertCell(2);
    cell4 = row.insertCell(3);
    cell1.innerHTML = nplate;
    cell2.innerHTML = carcolor();
    cell3.innerHTML = 'slot' + i;
    cell4.innerHTML = "remove";


  }

})


/*GENERTE TWO COLOR FOR CAR*/

function carcolor() {
  var color = ["black", "white", "blue", "red"];
  var colornum = Math.floor(Math.random() * 4);

  var carcolor = color[colornum];

  return carcolor;
}

/*GENERTE TWO TEXT FOR NUMPLATE*/

function numberplate() {
  var text = "";
  var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";

  for (var i = 0; i < 2; i++)
    text += possible.charAt(Math.floor(Math.random() * possible.length));


  return text;
}

//clear row when click remove row
var table = document.getElementsByClassName('table')[0];
table.addEventListener('click', clearRow, false);

function clearRow(event) {

  var target = event.target;
  if (target.cellIndex === 3) {
    console.log(target.parentNode.children)
    Array.from(target.parentNode.children).forEach(function(ele) {

      ele.innerHTML = '';
    });
  }
}

table {
  height: 20px;
  width: 600px;
}

td {
  background: pink;
  height: 20px;
  border: 1px solid black;
}

<input type="number" name="" id="inputvechnumber" placeholder="vehicle generate">
<button type="submit" id="vech">submit</button>




<table class="table">
  <thead>

  </thead>
  <tbody>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>

  </tbody>
</table>