den Zugriff auf Daten von Bootstrap dynamischen Tabelle

Question

dies ist ein Beispiel für ein Bootstrap dynamische Tabelle: ich die Daten in der Tabelle

HTML

<div class="container"> 
    <div class="row clearfix"> 
    <div class="col-md-12 column"> 
     <table class="table table-bordered table-hover" id="tab_logic"> 
      <thead> 
       <tr > 
        <th class="text-center"> 
         # 
        </th> 
        <th class="text-center"> 
         Name 
        </th> 
        <th class="text-center"> 
         Mail 
        </th> 
        <th class="text-center"> 
         Mobile 
        </th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr id='addr0'> 
        <td> 
        1 
        </td> 
        <td> 
        <input type="text" name='name0' placeholder='Name' class="form-control"/> 
        </td> 
        <td> 
        <input type="text" name='mail0' placeholder='Mail' class="form-control"/> 
        </td> 
        <td> 
        <input type="text" name='mobile0' placeholder='Mobile' class="form-control"/> 
        </td> 
       </tr> 
       <tr id='addr1'></tr> 
      </tbody> 
     </table> 
    </div> 
</div> 
<a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a> 
</div> 
    <p id="qoz">s</p> 

JavaScript

$(document).ready(function(){ 
    var i=1; 
$("#add_row").click(function(){ 
    $('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='name"+i+"' type='text' placeholder='Name' class='form-control input-md' /> </td><td><input name='mail"+i+"' type='text' placeholder='Mail' class='form-control input-md'></td><td><input name='mobile"+i+"' type='text' placeholder='Mobile' class='form-control input-md'></td>"); 

    $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>'); 
    i++; 
}); 
$("#delete_row").click(function(){ 
    if(i>1){ 
    $("#addr"+(i-1)).html(''); 
    i--; 
    } 
}); 
}); 

zugreifen möchten

Wie kann ich auf die Daten in der Tabelle zugreifen?

Dies wird in einer Schriftart mit festem Zeichenabstand angezeigt. Die ersten vier Leerzeichen werden entfernt, aber alle anderen Leerzeichen bleiben erhalten.

Answer 1

Daten anzuzeigen, freundlicherweise unten Code Siehe

$(document).ready(function(){ 
 
    var i=1; 
 
    
 
    $("#add_row").click(function(){ 
 
    var numTr = $("#tab_logic tbody tr").length; 
 
    
 
    $('#tab_logic').append("<tr id='addr"+(numTr)+"'><td>"+ (numTr+1) +"</td><td><input name='name"+numTr+"' type='text' placeholder='Name' class='form-control input-md' /> </td><td><input name='mail"+numTr+"' type='text' placeholder='Mail' class='form-control input-md'></td><td><input name='mobile"+numTr+"' type='text' placeholder='Mobile' class='form-control input-md'></td></tr>"); 
 

 
}); 
 
$("#delete_row").click(function(){ 
 
    var notr = $("#tab_logic tbody tr").length 
 
    if(notr>1){ 
 
     $("#addr"+(notr-1)).remove(); 
 
    } 
 
}); 
 
    
 
    
 
$("#show_data").click(function(){ 
 
    var htmlString=""; 
 
    $("#tab_logic tbody tr").each(function(index,el){ 
 
     if(index<$("#tab_logic tbody tr").length) { 
 
      var name = $("[name='name"+index+"']").val(); 
 
      var mail = $("[name='mail"+index+"']").val(); 
 
      var mobile = $("[name='mobile"+index+"']").val(); 
 
      console.log("Row "+index+" : [Name="+name+"] - [Mail="+mail +"] - [Mobile="+mobile+"]"); 
 
     htmlString += showDataHtml(index,name,mail,mobile) 
 
     } 
 
     $("#data-row").html(htmlString); 
 
    }); 
 
}); 
 
}); 
 

 
function showDataHtml(index,name,mail,mobile) { 
 
    index++; 
 
    return "<div class='col-md-12'>Row "+index+" : Name = "+name+" - Mail = "+mail+" - Mobile = "+mobile+"</div>" 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.js"></script> 
 
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <div class="row clearfix"> 
 
    <div class="col-md-12 column"> 
 
     <table class="table table-bordered table-hover" id="tab_logic"> 
 
      <thead> 
 
       <tr > 
 
        <th class="text-center"> 
 
         # 
 
        </th> 
 
        <th class="text-center"> 
 
         Name 
 
        </th> 
 
        <th class="text-center"> 
 
         Mail 
 
        </th> 
 
        <th class="text-center"> 
 
         Mobile 
 
        </th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr id='addr0'> 
 
        <td> 
 
        1 
 
        </td> 
 
        <td> 
 
        <input type="text" name='name0' placeholder='Name' class="form-control"/> 
 
        </td> 
 
        <td> 
 
        <input type="text" name='mail0' placeholder='Mail' class="form-control"/> 
 
        </td> 
 
        <td> 
 
        <input type="text" name='mobile0' placeholder='Mobile' class="form-control"/> 
 
        </td> 
 
       </tr> 
 
      </tbody> 
 
     </table> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a> 
 
</div> 
 
<div class="row"> 
 
<a id='show_data' class=" btn btn-default">SHow Data</a> 
 
</div> 
 

 
<div class="container"> 
 
    <div id="data-row" class="row clearfix"> 
 
    
 
    <div> 
 
</div>

(Ich habe zeigen Daten Button-Klick hinzugefügt)

Answer 2

$(document).ready(function(){ 
 
    var i=1; 
 
$("#add_row").click(function(){ 
 
    $('#addr'+i).html("<td>"+ (i+1) +"</td><td><input name='name"+i+"' type='text' placeholder='Name' class='form-control input-md' /> </td><td><input name='mail"+i+"' type='text' placeholder='Mail' class='form-control input-md'></td><td><input name='mobile"+i+"' type='text' placeholder='Mobile' class='form-control input-md'></td>"); 
 

 
    $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>'); 
 
    i++; 
 
}); 
 
$("#delete_row").click(function(){ 
 
    if(i>1){ 
 
    $("#addr"+(i-1)).html(''); 
 
    i--; 
 
    } 
 
}); 
 
    $('#Get_row_data').click(function(){ 
 
    $('[id^=addr]').each(function(){ 
 
     var id = $(this).attr('id'); 
 
     $('#'+id +' td input').each(function(){ 
 
      console.log($(this).val()); 
 
     }); 
 
    }); 
 
    
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="row clearfix"> 
 
    <div class="col-md-12 column"> 
 
     <table class="table table-bordered table-hover" id="tab_logic"> 
 
      <thead> 
 
       <tr > 
 
        <th class="text-center"> 
 
         # 
 
        </th> 
 
        <th class="text-center"> 
 
         Name 
 
        </th> 
 
        <th class="text-center"> 
 
         Mail 
 
        </th> 
 
        <th class="text-center"> 
 
         Mobile 
 
        </th> 
 
       </tr> 
 
      </thead> 
 
      <tbody> 
 
       <tr id='addr0'> 
 
        <td> 
 
        1 
 
        </td> 
 
        <td> 
 
        <input type="text" name='name0' placeholder='Name' class="form-control"/> 
 
        </td> 
 
        <td> 
 
        <input type="text" name='mail0' placeholder='Mail' class="form-control"/> 
 
        </td> 
 
        <td> 
 
        <input type="text" name='mobile0' placeholder='Mobile' class="form-control"/> 
 
        </td> 
 
       </tr> 
 
       <tr id='addr1'></tr> 
 
      </tbody> 
 
     </table> 
 
    </div> 
 
</div> 
 
<a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a> 
 
<a id='Get_row_data' class="pull-right btn btn-default">Get Row Data</a>

Hallo Bitte überprüfen Sie diesen Code Dieser Sie aus Ihren Zweck bei der Lösung helfen könnte. Was ich getan habe ist, dass ich eine neue Schaltfläche hinzugefügt habe, um die Daten aus der Zeile zu erhalten. Ich verwendete wildCard Id von Zeile und holen Sie den Wert von Eingabefeldern.

Dank