動態創建tr和添加行數計數

HTML起作用動態創建tr和添加行數計數

<tbody class="list"> 
     <tr> 
      <td class="id">1</td> 
      <td class="name">jason</td> 
      <td class="number">2</td> 
      <td class="edit"><button class="edit__item">Edit</button></td> 
      <td class="remove"><button class="remove__item">Remove</button></td> 
     </tr> 
</tbody>

功能

function catchList() { 
    var tr; 
    $('#list tr').each(function(index, tr) { 
     $('td:not(.id,.edit,.remove)', tr).each(function() { 
      var textvalue = $(this).text(); 
      tr = $('<tr/>'); 
      tr.append("<td>" + textvalue + "</td>"); 
      $('.displayTable__list').append(tr); 
     }); 
    }); 
}

顯示的html

<div class="dataDisplay__list"> 
    <table class="teamList__displayTable"> 
    <thead> 
    <tr class="displayTable__header"> 
     <th>Name</th> 
     <th>Number</th> 
     </tr> 
    </thead> 
    <tbody class="displayTable__list"> 

     //create those list at here 

    </tbody> 
    </table> 
</div><!-- end of dataDisplay__list -->

第一是就1列2創建數計數3.

2nd如何將其排隊可能使用表？

ia表我必須得到所有內部tr值到另一個表（顯示），所以我使用函數來獲取所有值並將它們追加到顯示錶中，但我有問題排隊和我我如何在行上創建數字？我的意圖是這樣的。

名稱編號

1.jason 2

來源

2017-02-24 dee cheok


 
$(document).ready(function(){ 
 

 
      $(".add-row").click(function(){ 
 

 
\t \t \t \t var rowCount = $('#myTable tr').length; 
 
\t \t \t \t //alert(rowCount); 
 
       var name = $("#name").val(); 
 

 
       var email = $("#email").val(); 
 

 
       var markup = "<tr><td>" + rowCount + "</td><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td></tr>"; 
 

 
       $("table tbody").append(markup); 
 

 
      }); 
 

 
      
 

 
      // Find and remove selected table rows 
 

 
      $(".delete-row").click(function(){ 
 

 
       $("table tbody").find('input[name="record"]').each(function(){ 
 

 
        if($(this).is(":checked")){ 
 

 
         $(this).parents("tr").remove(); 
 

 
        } 
 

 
       }); 
 

 
      }); 
 

 
     });

table{ 
 

 
      width: 100%; 
 

 
      margin: 20px 0; 
 

 
      border-collapse: collapse; 
 

 
     } 
 

 
     table, th, td{ 
 

 
      border: 1px solid #cdcdcd; 
 

 
     } 
 

 
     table th, table td{ 
 

 
      padding: 5px; 
 

 
      text-align: left; 
 

 
     }

<!DOCTYPE html> 
 

 
    <html lang="en"> 
 

 
    <head> 
 

 
    <meta charset="utf-8"> 
 

 
    <title>jQuery Add/Remove Table Rows</title> 
 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
 
    
 
    </head> 
 

 
    <body> 
 

 
     <form> 
 

 
      <input type="text" id="name" placeholder="Name"> 
 

 
      <input type="text" id="email" placeholder="Email Address"> 
 

 
      <input type="button" class="add-row" value="Add Row"> 
 

 
     </form> 
 

 
     <table id="myTable" class="myTable"> 
 

 
      <thead> 
 

 
       <tr> 
 

 
        <th>No</th> 
 
\t \t \t \t \t 
 
        <th>Select</th> 
 

 
        <th>Name</th> 
 

 
        <th>Email</th> 
 

 
       </tr> 
 

 
      </thead> 
 

 
      <tbody> 
 

 
       <tr> 
 

 
        <td id="id" class="id">1</td> 
 

 
        <td><input type="checkbox" name="record"></td> 
 

 
        <td>Peter Parker</td> 
 

 
        <td>[email protected]</td> 
 

 
       </tr> 
 

 
      </tbody> 
 

 
     </table> 
 

 
     <button type="button" class="delete-row">Delete Row</button> 
 

 
    </body> 
 

 
    </html>

來源

2017-02-24 06:24:58

-1

烏爾查詢是不明確的。如果設置行號是Ur問題，那麼可以通過局部var完成並將其遞增1。例如：

function catchList(){ 
    var rowNum = 0; 
    var tr; 
    $('#list tr').each(function(index, tr) { 
    rowNum++; //Then use it where ever needed!!!. 
    $('td:not(.id,.edit,.remove)', tr).each(function() { 
    var textvalue = $(this).text(); 
    tr = $('<tr/>'); 
    tr.append("<td>" + textvalue + "</td>"); 
    $('.displayTable__list').append(tr); 
    }); 
    }); 
    }

來源

2017-02-24 05:31:40

沒有任何HTML可以通過它創建自己的行號？ –

不，據我所知，沒有自動附加數字的html –

動態創建tr和添加行數計數

回答

相關問題