Question

如何点击“+”或“ - ”按钮向表格中的表格添加或删除更多行。我稍后也会收集这个表单中的所有数据，所以也许有必要以某种方式划分一个类的每一行，以便我可以检索每个类的行。 enter image description here

我的代码：

<?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>";
}

在上面的示例中，我仅从动态添加的名称字段中获取值。

我希望它有所帮助！如果您需要其他信息，请与我们联系。

将表格行添加到表格

1 个答案: