Question

我正在尝试在一页上包含2个不同的数据表。放我不断出错。

当我尝试一张桌子时，单击按钮不希望起作用，但不会引发错误。

我想要的是：

我想要2张不同的桌子。 1.零件编号 2.更改地址

预期结果：用户在数据表中填写一行，并将其格式化并传递到文本区域并作为电子邮件发送。

我有

<!doctype html>
    <html>


    <head>
<link rel="stylesheet" href="css/bootstrap.css">
      <link rel="stylesheet" type="text/css" href="css/css/dataTables.bootstrap4.min.css">
      <link rel="stylesheet" type="text/css" href="css/css/jquery.dataTables.min.css">
      <script type="application/javascript" src="js/jquery-3.3.1.min.js"></script>
      <script type="application/javascript" src="js/js/jquery.dataTables.min.js"></script>
      <script src="js/bootstrap.js"></script>
      <script src="js/bootstrap.min.js"></script>
      <script src="js/popper.min.js"></script>

    <script src="js/bootstrap.bundle.min.js"></script>
    <script src="js/bootstrap.bundle.js"></script>


            <script type="text/javascript" src="Scripts/main.js"></script>



          </head>
      <body>
        <div class="container">

表一：

      <th>Part Number</th>
      <th>Qty</th>
      <th>Price</th>
      <th>Option</th>
      <th>Commit Row</th>


    </tr>
  </thead>

  <tbody>
    <tr>
      <td> <input type="text" class="form-control" name="Part" id="PartNumber"></td>
      <td> <input type="text" class="form-control" name="Quantity" id="Quantity"></td>
      <td><input class="form-control"type="text" name="Price" id="Price"></td>
      <td><select class="form-control" name="PartOption" id="PartOption">
        <option selected> Add or Remove Part</option>
        <option value="AddPart">Add Part</option>
        <option value="RemovePart">Remove Part</option>
      </select></td>
      <td><button type="button" class="btn-toolbar" id="Commit" name="Commit" >Commit Part Change</button></td>
    </tr>
  </tbody>

</table>
Table 2: 


   <table class=" col-sp-12" id="AddressTable" style="background-color:lightgrey">
       <thead>
        <tr>
          <th>Contact/Company Name</th>
          <th>Address</th>
          <th>Address 2</th>
          <th>City</th>
          <th>Country</th>
          <th>Province</th>
          <th>Postal Code</th>

        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="text" class="form-control" id="ContactName"></td>
         <td><input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"></td>
          <td><input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor"></td>
          <td><input type="text" class="form-control" id="inputCity"></td>


          <td><select id="inputCountry" class="form-control">
              <option selected>Country</option>
              <option value="CA">Canada</option>
              <option value="US">United States</option>
            </select></td>
          <td> <select id="inputProvince" class="form-control">
              <option selected>Choose...</option>
                 <optgroup label="CAN">
                    <option value="AB">Alberta</option>
                    <option value="BC">British Columbia</option>
                    <option value="MB">Manitoba</option>
                    <option value="NB">New Brunswick</option>
                    <option value="NL">Newfoundland and Labrador</option>
                    <option value="NS">Nova Scotia</option>
                    <option value="ON">Ontario</option>
                    <option value="PE">Prince Edward Island</option>
                    <option value="QC">Quebec</option>
                    <option value="SK">Saskatchewan</option>
                    <option value="NT">Northwest Territories</option>
                    <option value="NU">Nunavut</option>
                    <option value="YT">Yukon</option>
                </optgroup>


            </select></td>
          <td><input type="text" class="form-control" id="inputZip"></td>
          <td><button type="button">Change Address</button></td>
        </tr> 
      </tbody>


    </table>  



>  TextArea to be sent as an email

    <div><textarea name="EmailMessage" id="EmailMessage" cols="150" rows="20"></textarea></div>


      </div>
      </body>
    </html>

Javascript文件：main.js

$(document).ready(function() {

   $('#PartTable').DataTable({
      paging:false,
      searching:false

    });

    $('#PartTable').on('click','tbody #Commit',function(){
      var data_row = table.row($(this).closest('tr')).data();
      alert(data_row);
    })

} );

jQuery DataTable上的按钮单击事件并传递给TextArea

0 个答案: