将表格行添加到表格

Question

我该怎么做才能让你点击按钮“+”或“ - ”来向表格添加或删除更多行。我以后也会收集这种形式的所有数据，所以也许需要以某种方式划分一个类的每一行，以便我可以检索每个类的行。

我的代码：

<?php include 'header.php';?> 
    <script> 

function showUser(str) { 
    if (str == "") { 
     document.getElementById("txtHint").innerHTML = ""; 
     return; 
    } else { 
     var val = $('#test').val()  
     var id = $('#clientsname option').filter(function() { 
      return this.value == val; 
     }).data('id'); 
     if (window.XMLHttpRequest) { 
      xmlhttp = new XMLHttpRequest(); 
     } else { 
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
       //document.getElementById("txtHint").innerHTML = xmlhttp.responseText; 
       var data = JSON.parse(xmlhttp.responseText); 
       $('input#NIP').val(data[0].NIP); 
       $('input#street').val(data[0].Adress); 
       $('input#city').val(data[0].City); 
       $('input#postcode').val(data[0].PostCode); 
       $('input#phone').val(data[0].Phone); 
       $('input#email').val(data[0].Email); 
       //alert(data[0].Name); 

      } 
     } 
     xmlhttp.open("GET","getclients/"+id); 
     xmlhttp.send(); 
    } 
} 
function getProducts(str) { 
    if (str == "") { 
     document.getElementById("txtHint").innerHTML = ""; 
     return; 
    } else { 
     var val = $('#services').val()  
     var id = $('#service option').filter(function() { 
      return this.value == val; 
     }).data('id'); 
     if (window.XMLHttpRequest) { 
      xmlhttp = new XMLHttpRequest(); 
     } else { 
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     xmlhttp.onreadystatechange = function() { 
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
       //document.getElementById("txtHint").innerHTML = xmlhttp.responseText; 
       var data = JSON.parse(xmlhttp.responseText); 
       $('input#jm').val(data[0].Jm); 
       $('input#cena').val(data[0].Price); 
       //alert(data[0].Name); 

      } 
     } 
     xmlhttp.open("GET","getservices/"+id); 
     xmlhttp.send(); 
    } 
} 
function addValue(val, price){ 
    var price = $('input#cena').val();; 
    var value = price*val; 
    $('input#value').val(value+" zł"); 
} 
    </script> 
    <div class="left-nav"> 
    <p>Faktury</p> 
    <ul> 
     <li><a href="invoices/addfv">Dodaj Fakturę VAT</a></li> 
     <li><a href="?task=invoices&action=add">Dodaj Fakturę Pro Forma</a></li> 
     <li><a href="?task=invoices&action=add">Dodaj Fakturę Korektę</a></li> 
     <li><a href="?task=invoices&action=add">Dodaj Fakturę Zaliczkową</a></li> 
    </ul> 
</div> 
<div class="content"> 

    <div class="col-md-6" style="background: whitesmoke;"> 
     <fieldset> 
      <div id="txtHint"></div> 
      <legend>Kontrahent</legend> 
       <form class="form-horizontal" role="form" action='<?= base_url();?>index.php/invoices/save' method="post"> 
       <div class="form-group"> 
        <label for="firstName" class="col-lg-3 control-label">Nazwa kontrahenta</label> 
        <div class="col-lg-6"> 
         <input list="clientsname" class="form-control" id="test" name="name" onchange="showUser(this.value)"> 
         <datalist id="clientsname"> 
           <?php foreach ($query as $row) { ?> 
          <option class="clients" value="<?php echo $row->Name; ?>" data-id="<?php echo $row->id; ?>"><?php echo $row->Name; ?></option> 
           <?php }?> 
         </datalist> 
        </div> 
        </div>  
        <div class="form-group"> 
        <label for="nip" class="col-lg-3 control-label">NIP</label> 
        <div class="col-lg-6"> 
         <input type="text" class="form-control" name="nip" id="NIP" placeholder="NIP"> 
        </div> 
        </div> 
        <div class="form-group"> 
         <label for="street" class="col-lg-3 control-label">Ulica</label> 
         <div class="col-lg-6"> 
          <input type="text" class="form-control" name="street" id="street" placeholder="Ulica"> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label for="postcode" class="col-lg-3 control-label">Kod pocztowy</label> 
         <div class="col-lg-4"> 
          <input type="text" class="form-control" name="postcode" id="postcode" placeholder="Kod pocztowy"> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label for="city" class="col-lg-3 control-label">Miasto</label> 
         <div class="col-lg-6"> 
          <input type="text" class="form-control" name="city" id="postcode" placeholder="Maisto"> 
         </div> 
        </div> 
        <div class="form-group"> 
         <label for="phone" class="col-lg-3 control-label">Telefon</label> 
         <div class="col-lg-6"> 
          <input type="text" class="form-control" name="phone" id="phone" placeholder="Telefon"> 
         </div> 
        </div>      
        <div class="form-group"> 
        <label for="email" class="col-lg-3 control-label">Email</label> 
        <div class="col-lg-6"> 
         <input type="text" class="form-control" name="email" id="email" placeholder="Email"> 
        </div> 
        </div> 

     </div> 
    <div class="col-md-6" style="background:whitesmoke;"> 
     <legend>Płatność</legend> 
        <div class="form-group"> 
        <label for="payments" class="col-lg-3 control-label">Sposób płatności</label> 
        <div class="col-lg-6"> 
         <select class="form-control" name="payments" id="payments"> 
          <option value="gotówka">Gotówka</option> 
          <option value="przelew">Przelew</option> 
          <option value="przelew 7 dni">Przelew 7 dni</option> 
          <option value="przelew 14 dni">Przelew 14 dni</option> 
          <option value="przedpłata">Przedpłata</option> 
         </select>   
        </div> 
        </div><br><br><br> 
        <div class="form-group"> 
        <label for="dateadd" class="col-lg-3 control-label">Data wystawienia</label> 
        <div class="col-lg-6"> 
         <input type="date" class="form-control" name="dateadd" id="dateadd"> 
        </div> 
        </div><br><br> 
        <div class="form-group"> 
        <label for="datepay" class="col-lg-3 control-label">Data płatności</label> 
        <div class="col-lg-6"> 
         <input type="date" class="form-control" name="datepay" id="datepay"> 
        </div> 
        </div><br><br> 
        <div class="form-group"> 
        <label for="bank" class="col-lg-3 control-label">Numer Konta</label> 
        <div class="col-lg-6"> 
         <select class="form-control" name="payments" id="bank"> 
          <option value="choose">-- Wybierz konto --</option> 
          <option value="<?php echo $settings[0]->BankNumber; ?>"><?php echo $settings[0]->BankNumber; ?></option> 
         </select>   
        </div> 
        </div><br><br> 
    </div> 
    <div class="col-md-11" style="background:whitesmoke;"> 
     <legend style="text-align:center">Produkty/usługi</legend> 
     <table class="table"> 
      <tr> 
       <th>Lp.</th> 
       <th>Nazwa</th> 
       <th>Ilość</th> 
       <th>JM.</th> 
       <th>Cena</th> 
       <th>Wartość</th> 
       <th>Akcje</th> 
      </tr> 
      <tr> 
       <td> 

       </td> 
       <td><div class="col-lg-12"> 
         <input list="service" class="form-control" id="services" name="name" onchange="getProducts(this.value)"> 
         <datalist id="service"> 
           <?php foreach ($services as $service) { ?> 
          <option class="services" value="<?php echo $service->Name; ?>" data-id="<?php echo $service->id; ?>"><?php echo $service->Name; ?></option> 
           <?php }?> 
         </datalist> 
        </div> 
       </td> 
       <td> 
        <div class="col-lg-10"> 
         <input type="text" class="form-control" id="ilość" placeholder="Ilość" onchange="addValue(this.value)"> 
        </div> 
       </td> 
       <td> 
        <div class="col-lg-10"> 
          <input type="text" class="form-control" id="jm" placeholder="JM"> 
        </div> 
       </td> 
       <td> 
        <div class="col-lg-10"> 
          <input type="text" class="form-control" id="cena" placeholder="Cena"> 
        </div> 
       </td> 
       <td> 
        <div class="col-lg-10"> 
          <input type="text" class="form-control" id="value" placeholder="Wartość"> 
        </div> 
       </td> 
       <td> 
        <button class="btn btn-success">+</button><button class="btn btn-danger">-</button> 
       </td> 
     </div> 
</tr> 
</table> 
        <div class="form-group"> 
        <div class="col-lg-offset-3 col-lg-10"> 
         <button type="submit" class="btn btn-success">Dodaj</button> <a href="<?= base_url();?>index.php/invoices/" class="btn btn-primary">Anuluj</a> 
        </div> 
        </div> 
       </form> 
     </fieldset>  
    </div> 

</div> 

Answer 1

这是我为你做了一个小提琴：http://jsfiddle.net/1c1nr9sp/3/

以上小提琴会给你如何添加/在HTML中删除行的想法表格，最后得到值。

HTML：

<table class='table table-bordered'> 
    <thead> 
    <tr> 
     <th></th> 
     <th>Name</th> 
     <th>Age</th> 
    </tr> 
    </thead> 
<tbody id='InfoTableBody' data-maxid='0'> 
</tbody> 
<tfoot> 
    <tr><td colspan='3'> 
     <button type="button" id="add" class="btn btn-success">Add</button> 
    </td></tr> 
</tfoot> 
</table> 
<button type="button" id="save">Save</button>  
<label id="result"></label> 

JAVA SCRIPT

var activeRowIds = []; 
var tableBody =$('#InfoTableBody'); 

$('#add').on('click', function(){ 

    var rowid = parseInt(tableBody.data('maxid'))+1;  
    tableBody.append(GetNewRow(rowid));  
    tableBody.data('maxid',rowid); 
    activeRowIds.push(rowid); 

    $('.remove').on('click', function(){ 
     var row = $(this).closest('tr'); 
     var rowid = row.data('rowid'); 
     var index = activeRowIds.indexOf(rowid); 
     if (index > -1) { 
      activeRowIds.splice(index, 1); 
     } 
     row.remove(); 
    }); 
}); 

$('#save').on('click', function(){ 
    var appendText = ''; 
    $.each(activeRowIds, function(i, rowid){ 
     appendText+="Name at row "+rowid+" is "+$('#Name'+rowid).val(); 
    }); 

    $('#result').text(appendText); 
}); 

function GetNewRow(rowid) 
{ 
    return "<tr data-rowid='"+rowid+"'>"+ 
     "<td width='50px'>"+ 
      "<button class='remove btn btn-danger'>Remove</button>"+ 
     "</td>"+ 
     "<td>"+ 
      "<input type='text' id='Name"+rowid+"'></input>"+ 
     "</td>"+ 
     "<td>"+ 
      "<input type='text' id='Age"+rowid+"'></input>"+ 
     "</td>"+ 
    "</tr>"; 
} 

在上面的例子中，我只从动态添加名称字段中所获得的价值。

我希望它有帮助！让我知道你是否需要额外的信息。