动态创建tr并添加行号计数
[英]Dynamic create tr and add row number count
问题描述
html to function 
HTML功能
<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 功能
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);
});
});
}
display html 显示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 -->
1st is to create the number count on row 1. 2. 3. 第一种是在第1. 2. 3.行上创建数字计数。
2nd how to i line it up probably using table ? 2我如何使用表格将其对齐？
ia table which i have to get all inside tr value to a other table(display) , so i use the function to get all value and append them into the display table , but i have problem to line them up and i how do i create number on row ? ia表，我必须将所有内部tr值都获取到另一个表（显示）中，所以我使用该函数获取所有值并将它们附加到显示表中，但是我很难将它们排列起来，我该如何创建排多少？ my intention is like this. 我的意图是这样的。
Name Number 姓名编号
1.jason 2 1.杰森2
2 个解决方案
解决方案1
0 已采纳 2017-02-24 06:24:58
$(document).ready(function(){ $(".add-row").click(function(){ var rowCount = $('#myTable tr').length; //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> <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>peterparker@mail.com</td> </tr> </tbody> </table> <button type="button" class="delete-row">Delete Row</button> </body> </html>
解决方案2
-1 2017-02-24 05:31:40
Ur query is not clear. Ur查询不清楚。 If setting row number is Ur issue, then it can be done by local var and incrementing it by one. 如果设置行号是Ur问题，则可以通过本地var并将其递增1来完成。 Eg: 例如：
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);
});
});
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.