Javascript 从单击按钮删除表行_Javascript_Html_Html Table_Delete Row

Javascript 从单击按钮删除表行

javascript html

Javascript 从单击按钮删除表行,javascript,html,html-table,delete-row,Javascript,Html,Html Table,Delete Row,我键入的以下代码用于在html表中添加或删除行。当我单击“添加”按钮时没有任何问题，但当我单击“删除”按钮时，虽然我想删除某一行，但我无法删除该行。我收到一条警告信息，说明： “无法读取null的属性`onclick`” 我如何纠正这个问题 <HTML> <HEAD> <TITLE> Add/Remove dynamic rows in HTML table </TITLE> <SCRIPT language="javas

我键入的以下代码用于在html表中添加或删除行。当我单击“添加”按钮时没有任何问题，但当我单击“删除”按钮时，虽然我想删除某一行，但我无法删除该行。我收到一条警告信息，说明：

“无法读取null的属性`onclick`”

我如何纠正这个问题

<HTML>
  <HEAD>
    <TITLE> Add/Remove dynamic rows in HTML table </TITLE>
    <SCRIPT language="javascript">
      function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var colCount = table.rows[0].cells.length;

        for (var i = 0; i < colCount; i++) {

          var newcell = row.insertCell(i);

          newcell.innerHTML = table.rows[0].cells[i].innerHTML;
          //alert(newcell.childNodes);
          switch (newcell.childNodes[0].type) {
            case "text":
              newcell.childNodes[0].value = "";
              break;
            case "checkbox":
              newcell.childNodes[0].checked = false;
              break;
            case "select-one":
              newcell.childNodes[0].selectedIndex = 0;
              break;
          }
        }
      }

      function deleteRow(tableID) {
        try {
          var table = document.getElementById(tableID);
          var rowCount = table.rows.length;

          for (var i = 0; i < rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if (document.getElementById('button').onclick == true) {
              if (rowCount <= 1) {
                alert("Cannot delete all the rows.");
                break;
              }
              table.deleteRow(i);
              rowCount--;
              i--;
            }


          }
        } catch (e) {
          alert(e);
        }
      }
    </SCRIPT>
  </HEAD>

  <BODY>
    <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

    <TABLE id="dataTable" width="350px" border="1">
      <TR>

        <TD>
          <INPUT type="button" name="button" value=delete id=delete onclick="deleteRow('dataTable')">
        </TD>

      </TR>
    </TABLE>
  </BODY>
</HTML>


在HTML表中添加/删除动态行
函数addRow（tableID）{
var table=document.getElementById（tableID）；
var rowCount=table.rows.length；
var row=table.insertRow（rowCount）；
var colCount=table.rows[0].cells.length；
对于（变量i=0；iif（rowCountFirst things Firstdocument.getElementById（'button'）
返回undefined
，因为页面中没有id=button的元素
这就是您所得到的错误，但我认为您应该以稍微不同的方式删除表行
最简单的方法是：
function deleteRow(elem) {
  var table = elem.parentNode.parentNode.parentNode;
  var rowCount = table.rows.length;

  if(rowCount === 1) {
    alert('Cannot delete the last row');
    return;
  }

  // get the "<tr>" that is the parent of the clicked button
  var row = elem.parentNode.parentNode; 
  row.parentNode.removeChild(row); // remove the row
}

函数删除行（elem）{
var table=elem.parentNode.parentNode.parentNode；
var rowCount=table.rows.length；
如果（行计数===1）{
警报（“无法删除最后一行”）；
返回；
}
//获取“”作为所单击按钮的父级
var row=elem.parentNode.parentNode；
row.parentNode.removeChild（row）；//删除该行
}

并将此函数用作每个按钮上的单击事件处理程序：
<table>
  <tr>
    <td><button onclick="deleteRow(this)">delete</button></td>
  </tr>
</table>


删除
不需要创建deleteRow（tableID），因为这样做是试图覆盖javascript的默认deleteRow函数，所以不需要创建deleteRow（tableID），只需在单击delete按钮时添加“document.getElementById（'dataTable'）.deleteRow（this.rowIndex）”，即可
    <input type="button" name="button" value=delete id=delete onclick="document.getElementById('dataTable').deleteRow(this.rowIndex)">

我发现处理此类场景的最简单方法是使用类而不是ID，还可以使用上下文。ID用作页面上项目的唯一标识符。由于页面上很可能有多个“删除按钮”，因此最好使用类名来定位它们
所以，如果我是你，我会做的是包括jQuery，它会使事情对你来说简单得多
在html文档的结束正文标记之前添加以下行
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

这就是您所需要的。上面的代码使用上下文以您正在单击的“删除按钮”的父行为目标。无需指定哪个表、计算哪一行或剩下多少行等。
您可以使用下面的方法删除特定行
脚本方法：
function deleteRow(element,tableID) {
        try {
        var tableElement = document.getElementById(tableID);
        if(tableElement.rows.length <= 1){
            alert("Cannot delete all the rows.");
            return;
        }
        var x = element.parentElement;//td tag
        x = x.parentElement;// tr tag
        x.remove();
        }catch(e) {
            alert(e);
        }
    }

函数deleteRow（元素，tableID）{
试一试{
var tableElement=document.getElementById（tableID）；
如果（tableElement.rows.length<代码>
可乐
可乐
类型
去除
自动化
手册

JavaScript函数
<script>


    function addRow(tableId) {
    var table = document.getElementById(tableId);
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        var colCount = table.rows[1].cells.length;
        for(var i=0; i<colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[1].cells[i].innerHTML;
            //alert(newcell.childNodes);
            switch(newcell.childNodes[0].type) {
                case "text":
                        newcell.childNodes[0].value = ""; 
                        break;
                case "checkbox":
                        newcell.childNodes[0].checked = false;
                        break;
                case "select-one":
                        newcell.childNodes[0].selectedIndex = 0; 
                        break;
                case "button":
                    newcell.childNodes[0].value = "Delete";
                    break;
            }
        }
    }

    function deleteRow(deleteBtn) {

        var table = document.getElementById('scriptsTable');

         if(table.rows.length <= 2){
                alert("Cannot delete all the rows.");
                return;
            }
        if (typeof(deleteBtn) == "object") {
            $(deleteBtn).closest("tr").remove();
        } else {
            return false;
        }
        }
</script>


函数addRow（tableId）{
var table=document.getElementById（tableId）；
var rowCount=table.rows.length；
var row=table.insertRow（rowCount）；
var colCount=table.rows[1].cells.length；
对于（var i=0；i试试这个。这是一个有效的例子
   <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Tiger Nixon</td>
                        <td>System Architect</td>
                        <td><button>Delete</button></td>
                    </tr>
                </tbody>
            </table>

    <script>
      $(document).ready(function () {
         var table = $('#example').DataTable({
            "columns": [
              null, 
              null,
              null,
              {
                "sortable": false
              }
            ]
          });          
      });
      $('#example').on("click", "button", function(){
            console.log($(this).parent());
            table.row($(this).parents('tr')).remove().draw(false);
      });
    </script>


身份证件
名称
位置
行动
1.
老虎尼克松
系统架构师
删除
$（文档）.ready（函数（）{
变量表=$（'#示例'）。数据表({
“栏目”：[
无效的
无效的
无效的
{
“可排序”：false
}
]
});          
});
$（'#示例'）。在（“单击”，“按钮”，函数（）上）{
log（$（this.parent（））；
 <div class="table-responsive">          
                                      <table class="table" id="testTable">
                                        <thead>
                                          <tr>
                                            <th>Col1</th>
                                            <th>Col2</th>
                                            <th>Type</th>
                                            <th>Remove</th>
                                          </tr>
                                        </thead>
                                        <tbody>
                                          <tr>
                                            <td><input type="text" id="mainScript"  name="mainScript"></td>
                                            <td><input type="text" id="rollBackScript"  name="rollBackScript"></td>
                                            <td><select name="type" id ="type" >
                                                      <option value="Automated" selected >Automated</option> 
                                                      <option value="Manual" >Manual</option>
                                                </select>
                                            </td>
                                            <td><input type="button" class="btn btn-danger" value="Delete" onclick="deleteRow(this);"></td>
                                          </tr>
                                        </tbody>
                                      </table>
                                      </div>
                    </div>



                    <div class="row" align="left">
                    <input type="button"  class="btn btn-success"  value="Add Row" onclick="addRow('scriptsTable')" />
                    </div>

<script>


    function addRow(tableId) {
    var table = document.getElementById(tableId);
        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);
        var colCount = table.rows[1].cells.length;
        for(var i=0; i<colCount; i++) {
            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[1].cells[i].innerHTML;
            //alert(newcell.childNodes);
            switch(newcell.childNodes[0].type) {
                case "text":
                        newcell.childNodes[0].value = ""; 
                        break;
                case "checkbox":
                        newcell.childNodes[0].checked = false;
                        break;
                case "select-one":
                        newcell.childNodes[0].selectedIndex = 0; 
                        break;
                case "button":
                    newcell.childNodes[0].value = "Delete";
                    break;
            }
        }
    }

    function deleteRow(deleteBtn) {

        var table = document.getElementById('scriptsTable');

         if(table.rows.length <= 2){
                alert("Cannot delete all the rows.");
                return;
            }
        if (typeof(deleteBtn) == "object") {
            $(deleteBtn).closest("tr").remove();
        } else {
            return false;
        }
        }
</script>

   <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th>ID</th>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>Tiger Nixon</td>
                        <td>System Architect</td>
                        <td><button>Delete</button></td>
                    </tr>
                </tbody>
            </table>

    <script>
      $(document).ready(function () {
         var table = $('#example').DataTable({
            "columns": [
              null, 
              null,
              null,
              {
                "sortable": false
              }
            ]
          });          
      });
      $('#example').on("click", "button", function(){
            console.log($(this).parent());
            table.row($(this).parents('tr')).remove().draw(false);
      });
    </script>