Question

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

 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才能让你的问题更清晰，看看这个，这是你想要的吗？运行此演示，您将看到

＆＃13;

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 = '';
    });
  }
}

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以向＆＃34;删除＆＃34;添加点击事件监听器。细胞

我已经调整了你的jsfiddle以使它工作：

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);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);

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

        cell4.addEventListener('click', function () {
            [cell1, cell2, cell3].forEach(cell => cell.innerHTML = '');
        });

    }

})

我将单元格（cell1，cell2，...）变量声明移动到for循环范围中，否则将覆盖引用，单击remove按钮将始终删除最新添加的行。

Answer 3

如果要删除行（不清空值！），请考虑编辑上面添加几行的代码，如下所示：

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";


      /**********************************************
       *  Add a class to identify "Remove" buttons  *
       **********************************************/
      cell4.classList.add('remove');

        }

    /*******************************************************
     *  Bind click event and delete the corresponding row  *
     *******************************************************/ 
  var removeNodes = document.querySelectorAll('td.remove');
  removeNodes.forEach(node => {
    node.addEventListener('click', (event) => {
      var nodeElement = event.target;
      var rowToDelete = nodeElement.parentNode;
      rowToDelete.parentNode.removeChild(rowToDelete);
    })
  })

    })

在Javascript onclick中删除行

3 个答案: