我想在表的最后一行 - JavaScript之前禁用所有行的删除按钮

时间：2017-04-27 13:20:27

标签： javascript

我创建了一个带有表单字段的表元素，但我希望用按钮禁用所有输入字段。删除＆＃39;需要在表的最后一行之前禁用按钮。在我的代码中，我动态地向表中添加多行。

这是我的代码：

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>Dynamically ADD / REMOVE Field through Javascript</title>  
<link rel="stylesheet" href="css/bootstrap.css"/>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

    <style>

    .head{
    background-color: #0066cc;
    text-align: center;
    padding: 10 0;
    color: #ffffff;
    }

    .tab_class{
      text-align: center;
      width: 100%;
    }

    th, tr, td{
      padding-top: 5px;
      padding-bottom: 5px;
    }
    </style>

<script type=text/javascript>

var i=1;

function addelement()
{
  var table = document.getElementById("tableID");

  var tbody = document.getElementById("tbody");

  var tr=document.createElement('tr');
  tr.id='row'+i;

          var td1=document.createElement('td');
          var emp_id=document.createElement('input');
          emp_id.type='text';
          emp_id.id='emp_id'+i;
          emp_id.name='emp_id'+i;

          td1.appendChild(emp_id);
          tr.appendChild(td1);

          var td2=document.createElement('td');
          var emp_name=document.createElement('input');
          emp_name.type='text';
          emp_name.id='emp_name'+i;
          emp_name.name='emp_name'+i;

          td2.appendChild(emp_name);
          tr.appendChild(td2);

          var td3=document.createElement('td');
          var emp_mail=document.createElement('input');
          emp_mail.type='text';
          emp_mail.id='emp_mail'+i;
          emp_mail.name='emp_mail'+i;

          td3.appendChild(emp_mail);
          tr.appendChild(td3);

          var td4=document.createElement('td');
          var btn=document.createElement('input');
          btn.type='button';
          btn.value='Delete';
          btn.id='btn_remove'+i;
          btn.name='btn_remove'+i;
          btn.setAttribute('class', 'btn btn-danger');
          btn.setAttribute('onclick', 'deletRow('+i+')');

          td4.appendChild(btn);
          tr.appendChild(td4);  

          tbody.appendChild(tr);
          table.appendChild(tbody);
i++;


var button_id = document.getElementById('btn_remove'+i);
console.log('button_id');

}

function deletRow(i)
{
    document.getElementById('row'+i).remove();
}

</script>

</head>
<body>
<div class="container">
<h4 class="head">INSERT EMPLOYEE DETAIL PORTAL</h4>
<table class="table table-bordered" id="tableID">
<thead>
<tr>
<th>Employee Id</th>
<th>Employee Name</th>
<th>email Id</td>
<th><button name="add" id="add" class="btn btn-success" onclick="addelement(1)">Add</button></th> 
</tr>
</thead>
<tbody id="tbody"></tbody>
</table>
<input type="button" name="submit" id="submit" class="btn btn-success" value="submit"/> 
</div>
<script type="text/javascript" src="js/bootstrap.js"></script>
</body>
</html>

3 个答案:

答案 0 :(得分：1)

这是一个入门示例。我使用document.getElementsByClassName()函数来实现这一目标。

<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
  <title>Dynamically ADD / REMOVE Field through Javascript</title>
  <link rel="stylesheet" href="css/bootstrap.css" />
  <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

  <style>
    .head {
      background-color: #0066cc;
      text-align: center;
      padding: 10 0;
      color: #ffffff;
    }
    
    .tab_class {
      text-align: center;
      width: 100%;
    }
    
    th,
    tr,
    td {
      padding-top: 5px;
      padding-bottom: 5px;
    }
  </style>

  <script type=text/javascript>
    var i = 1;

    function addelement() {
      //Disable previous delete buttons
      var delBtns = document.getElementsByClassName('btn-danger');
      for (var i = 0; i < delBtns.length; i++) {
        delBtns[i].disabled = true;
      }

      var table = document.getElementById("tableID");

      var tbody = document.getElementById("tbody");

      var tr = document.createElement('tr');
      tr.id = 'row' + i;

      var td1 = document.createElement('td');
      var emp_id = document.createElement('input');
      emp_id.type = 'text';
      emp_id.id = 'emp_id' + i;
      emp_id.name = 'emp_id' + i;

      td1.appendChild(emp_id);
      tr.appendChild(td1);

      var td2 = document.createElement('td');
      var emp_name = document.createElement('input');
      emp_name.type = 'text';
      emp_name.id = 'emp_name' + i;
      emp_name.name = 'emp_name' + i;

      td2.appendChild(emp_name);
      tr.appendChild(td2);

      var td3 = document.createElement('td');
      var emp_mail = document.createElement('input');
      emp_mail.type = 'text';
      emp_mail.id = 'emp_mail' + i;
      emp_mail.name = 'emp_mail' + i;

      td3.appendChild(emp_mail);
      tr.appendChild(td3);

      var td4 = document.createElement('td');
      var btn = document.createElement('input');
      btn.type = 'button';
      btn.value = 'Delete';
      btn.id = 'btn_remove' + i;
      btn.name = 'btn_remove' + i;
      btn.setAttribute('class', 'btn btn-danger');
      btn.setAttribute('onclick', 'deletRow(' + i + ')');

      td4.appendChild(btn);
      tr.appendChild(td4);

      tbody.appendChild(tr);
      table.appendChild(tbody);
      i++;


      var button_id = document.getElementById('btn_remove' + i);
      console.log(button_id);

    }

    function deletRow(i) {
      document.getElementById('row' + i).remove();
      var delBtns = document.getElementsByClassName('btn-danger');
      delBtns[delBtns.length - 1].disabled = false;
    }
  </script>

</head>

<body>
  <div class="container">
    <h4 class="head">INSERT EMPLOYEE DETAIL PORTAL</h4>
    <table class="table table-bordered" id="tableID">
      <thead>
        <tr>
          <th>Employee Id</th>
          <th>Employee Name</th>
          <th>email Id</th>
          <th><button name="add" id="add" class="btn btn-success" onclick="addelement(1)">Add</button></th>
        </tr>
      </thead>
      <tbody id="tbody"></tbody>
    </table>
    <input type="button" name="submit" id="submit" class="btn btn-success" value="submit" />
  </div>
  <script type="text/javascript" src="js/bootstrap.js"></script>
</body>

</html>

答案 1 :(得分：0)

检查此代码。

＆＃13;
＆＃13; 
ds.so
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <title>Dynamically ADD / REMOVE Field through Javascript</title>
        <link rel="stylesheet" href="css/bootstrap.css" />
        <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

        <style>
            .head {
                background-color: #0066cc;
                text-align: center;
                padding: 10 0;
                color: #ffffff;
            }

            .tab_class {
                text-align: center;
                width: 100%;
            }

            th, tr, td {
                padding-top: 5px;
                padding-bottom: 5px;
            }
        </style>

        <script type=text/javascript>

            var i = 1;

            function addelement() {

                var table = document.getElementById("tableID");
                var tbody = document.getElementById("tbody");

                var tr = document.createElement('tr');
                tr.id = 'row'+i;

                var td1 = document.createElement('td');
                var emp_name = document.createElement('input');
                emp_name.type = 'text';
                emp_name.id = 'emp_name' + i;
                emp_name.name = 'emp_name' + i;

                td1.appendChild(emp_name);
                tr.appendChild(td1);

                var td2 = document.createElement('td');
                var emp_contact = document.createElement('input');
                emp_contact.type = 'text';
                emp_contact.id = 'emp_contact' + i;
                emp_contact.name = 'emp_contact' + i;


                td2.appendChild(emp_contact);
                tr.appendChild(td2);

                var td3 = document.createElement('td');
                var emp_mail = document.createElement('input');
                emp_mail.type = 'text';
                emp_mail.id = 'emp_mail' + i;
                emp_mail.name = 'emp_mail' + i;

                td3.appendChild(emp_mail);
                tr.appendChild(td3);

                var td4 = document.createElement('td');
                var btn = document.createElement('input');
                btn.type = 'button';
                btn.value = 'Delete';
                btn.id = 'btn_remove' + i;
                btn.name = 'btn_remove' + i;
                btn.setAttribute('class', 'btn btn-danger');
                btn.setAttribute('onclick', 'deletRow('+ i +')');
                if(i>1)
                    document.getElementById('btn_remove' + (parseInt(i)-parseInt(1))).setAttribute('disabled','true');

                td4.appendChild(btn);
                tr.appendChild(td4);

                tbody.appendChild(tr);
                table.appendChild(tbody);

 var index = i++;
 console.log(index);

 // var rowCount = document.getElementById("tableID").rows.length;
 // console.log(rowCount);
            }

            function deletRow(i)
            {
                document.getElementById('row' + i).remove();
                document.getElementById('btn_remove' + (parseInt(i)-parseInt(1))).removeAttribute('disabled');
            }
       </script>

    </head>
    <body>
        <div class="container">
            <h4 class="head">INSERT EMPLOYEE DETAIL PORTAL</h4>
            <table class="table table-bordered" id="tableID">
                <thead>
                    <tr>
                        <th>Employee Name</th>
                        <th>Contact No.</th>
                        <th>Email Id</td>
                        <th><button name="add" id="add" class="btn btn-success" onclick="addelement()">Add</button></th>
                    </tr>
                </thead>
                <tbody id="tbody"></tbody>
            </table>
            <input type="submit" name="submit" id="submit" class="btn btn-success" value="submit" />
        </div>
        <script type="text/javascript" src="js/bootstrap.js"></script>
    </body>
    </html>
相关问题
最新问题