Question

我有两个选择框和一个表格。每个选择框有三个选项。我想删除每个选择框所选择的表格行。

以下是该按钮的代码。 service是服务按钮的ID，productid是产品按钮的ID。

＆＃13;

function deleteRow(tableid, prod, ser) {
  var table = document.getElementById(tableid);
  var rowCount = table.rows.length;
  var product = document.getElementById(prod).value;
  var service = document.getElementById(ser).value;
  for (var i = 1; i < rowCount; i++) {
    var row = table.rows[i];
    if (document.getElementById(tableid).rows[i].cells[0].value == prod) {
      console.log(table.rows.length);
      table.deleteRow(i);
      i++;
    }
  }
}

＆＃13;

<form>

  <body>
    <nav class="navbar navbar-default">
      <div class="bg-primary text-white">
        <h1 align=center>Welcome To AT&T</h1>
      </div>
    </nav>
    <div class="container">
      <div class="col-xs-9 col-xs-offset-3">
        <div class="dropdown">
          <label style="margin-right: 63px">
               <h4 > Product</h4>
            </label> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <select name="Select" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" id="productID" onclick="changeProduct(this.id,'Service','usoc','class')">
               <option   value="" disabled selected>Select Product</option>
               <option value="Gigaman">Gigaman</option>
               <option value="ASE">ASE</option>
               <option value="Decaman">Decaman</option>
            </select>
          </ul>
          </p>
        </div>
        <div class="dropdown">
          <label style="margin-right: 39px">
               <h4>Service Code</h4>
            </label>
          <div class="dropdown btn-group">
            <select id="Service" class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                  <title>Select</title>
                  <span class="caret"></span></button>
               </select>
          </div>
          &nbsp;&nbsp;
          <button type="button" class="btn btn-success btn-sm" id="addService" onclick="addRow('RegionTable','Service','productID')"> Add </button>&nbsp;&nbsp;&nbsp;
          <button type="button" class="btn btn-danger btn-sm" onclick="deleteRow('RegionTable','Service','productID')">Delete</button>
        </div>
        <br>
        <div class="dropdown">
          <label style="margin-right: 110px">USOC</label>
          <div class="dropdown btn-group"><select id="usoc" class="btn btn-primary dropdown-toggle " id="dropdownMenu1" type="button" data-toggle="dropdown">Select <span class="caret"></span></button>
               </select>
          </div>
          &nbsp;&nbsp;
          <button type="button" class="btn btn-success btn-sm">Add</button>&nbsp;&nbsp;&nbsp;
          <button type="button" class="btn btn-danger btn-sm">Delete</button>
          <br> <br>
          <div class="dropdown">
            <label style="margin-right: 16px">
                  <h4>Class of Service</h4>
               </label>
            <div class="dropdown btn-group"><select id="class" class="btn btn-primary btn-fw dropdown-toggle" type="button" data-toggle="dropdown">Select <span class="caret"></span></button>
                  </select>
            </div>
            &nbsp;&nbsp;
            <button type="button" class="btn btn-success btn-sm">Add</button>&nbsp;&nbsp;&nbsp;
            <button type="button" class="btn btn-danger btn-sm">Delete</button>
          </div>
        </div>
      </div>
      <br>
      <br> &nbsp;
      <table id="RegionTable" class="table table-bordered">
        <thead>
          <tr class="success">
            <th>
              <p align="center">Product</p>
            </th>
            <th>
              <p align="center">Service Code</p>
            </th>
            <th>
              <p align="center">USOC</p>
            </th>
            <th>
              <p align="center">Class of Service</p>
            </th>
            <th>
              <p align="center">Action</p>
            </th>
          </tr>
        </thead>
        <tbody>
        </tbody>
      </table>
    </div>

＆＃13;

以编程方式删除表行

0 个答案: