訪問引導動態表

Question

的數據，這是一個樣本引導動態表： 我想訪問表中

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--; 
    } 
}); 
}); 

數據

我如何訪問表中的數據？

這將以等寬字體顯示。前四個空格 將被剝離，但所有其他空格將被保留。

Answer 1

要顯示的數據，請參見下文代碼（我已經添加的數據顯示按鈕點擊）

$(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>

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>

你好請檢查該代碼，這可能幫助你解決你的目的。 我所做的是我添加了一個新按鈕來從行中獲取數據。 我用wildcard ID爲行並取出輸入框的值。

感謝