Question

当我点击Add Row按钮时，它显示错误。我想在每次单击添加行按钮时附加一个新的'tr'。每个td必须包含，复选框，名字，姓氏，电子邮件，移动编辑＆amp;保存。

如果我点击保存按钮，我想保存值。
并编辑按钮以编辑字段。
复选框用于选择多行并删除整行。

有人可以帮我做这件事吗...先谢谢。

var form = document.createElement('form');
document.body.appendChild(form);

var table = document.createElement('table');
table.setAttribute("id","myTable");
form.appendChild(table);

var btnClick = document.createElement('button');
btnClick.setAttribute('onclick','addTable()');
btnClick.innerHTML = "Add Row";
form.appendChild(btnClick);

var btnSave = document.createElement('button');
btnSave.innerHTML = "Save";

var btnDelete = document.createElement('button');
btnDelete.innerHTML = "Delete";

var btnEdit = document.createElement('button');
btnEdit.innerHTML = "Edit";

var checkbox = document.createElement('input');
checkbox.type = "checkbox";

var input = document.createElement('input');
input.type = "text";
input.placeholder = "Firstname";

var input1 = document.createElement('input');
input1.type = "text";
input1.placeholder = "Lastname";

var input2 = document.createElement('input');
input2.type = "email";
input2.placeholder = "Email";

var input3 = document.createElement('input');
input3.type = "number";
input3.placeholder = "Number";

function addTable() {
  var row = document.createElement('tr');
  table.appendChild(row);  
  var cell = document.createElement('td');  
  row.appendChild(cell);
  cell.appendChild(checkbox);
  cell.appendChild(input);
  cell.appendChild(input1);
  cell.appendChild(input2);
  cell.appendChild(input3);
  cell.appendChild(btnSave);
  cell.appendChild(btnEdit);
}

JsFiddle

Answer 1

要更改的第一个也是最重要的事情是您为添加行按钮使用的标记。通过使用按钮，您可以在每次按下时提交表单，从而撤消行添加和任何其他页面更改。使用＆lt;输入＆gt;如果你想要相同的外观，请使用类型按钮标记。如果您希望页面在不重新加载的情况下进行响应，您可能希望对保存编辑和删除按钮执行相同的操作。

对于其他一切，你几乎都在那里。如果我是你，我会停止使用setAttribute来做所有事情。您可以通过直接属性集设置元素的id和onclick（即table.id =＆＃34; myTable＆＃34 ;;）。当我想一次设置多个属性时，我通常只使用setAttribute作为内联样式（即table.setAttribute（＆＃34; style＆＃34;，＆＃34; border：2px solid; color：red;＆＃34 ）;

这是我的代码版本。

window.onload = function(){
    var addTable = function() {
        var checkbox = document.createElement('input');
        checkbox.type = "checkbox";

        var input = document.createElement('input');
        input.type = "text";
        input.placeholder = "Firstname";

        var input1 = document.createElement('input');
        input1.type = "text";
        input1.placeholder = "Lastname";

        var input2 = document.createElement('input');
        input2.type = "email";
        input2.placeholder = "Email";

        var input3 = document.createElement('input');
        input3.type = "number";
        input3.placeholder = "Number";

        var btnSave = document.createElement('button');
        btnSave.innerHTML = "Save";

        var btnDelete = document.createElement('button');
        btnDelete.innerHTML = "Delete";

        var btnEdit = document.createElement('button');
        btnEdit.innerHTML = "Edit";

        var row = document.createElement('tr');
        table.appendChild(row);  
        addCell(row,checkbox);
        addCell(row,input);
        addCell(row,input1);
        addCell(row,input2);
        addCell(row,input3);
        addCell(row,btnSave);
        addCell(row,btnEdit);
        addCell(row,btnDelete);
      };

      var form = document.createElement('form');
      form.method = "post";
      document.body.appendChild(form);

      var table = document.createElement('table');
      table.id = "myTable";
      form.appendChild(table);

      var btnClick = document.createElement('input');
      btnClick.type = "button";
      btnClick.value = "Add Row";
      btnClick.onclick = addTable;
      form.appendChild(btnClick);
  };

  function addCell(row,elm){
      var cell = document.createElement('td');  
      row.appendChild(cell);
      cell.appendChild(elm);
  }

动态添加，编辑＆amp;删除Js中表中的行

1 个答案: