Hi I am creating a table structure dynamically. When I click a package I am inserting child row to the table and added a rowspan value with the count of the child value. Now I have to number the row I used index of the row but when there is row span It should consider the whole row as say 1 next number must be 2. And When I click remove I need to remove all child row that are row spanned. Here is a code I have implemented,
嗨,我正在动态创建表结构。当我单击一个包时,我将子行插入到表中,并添加了一个带有子值计数的rowspan值。现在我必须对行使用索引的行进行编号,但是当有行跨度时应该考虑整行,如下所示,下一个数字必须为2.当我单击删除时,我需要删除所有行跨越的子行。这是我实施的代码,
var rowspans;
var servicecount;
var cnt;
var ser = [];
var refForEmployee = new Firebase("https://kekranmekrandubai.firebaseio.com/package");
refForEmployee.on("value", function(snapshot) {
var data = snapshot.val();
var list = [];
for (var key in data) {
if (data.hasOwnProperty(key)) {
name = data[key].image ? data[key].image : '';
emp_name = data[key].package_name ? data[key].package_name : '';
service = data[key].service ? data[key].service : '';
servicecount = service.length;
console.log("service data");
console.log(service);
console.log(servicecount);
if (name.trim().length > 0) {
list.push({
image: name,
emp_name: emp_name,
services: service
})
}
}
}
// refresh the UI
refreshUI(list);
});
function refreshUI(list) {
var lis = '';
for (var i = 0; i < list.length; i++) {
var empname = list[i].emp_name;
var serc = [];
serc = list[i].services;
lis += '<div class="outlining"><div class="customize"><img class="employeeimages" src="' + list[i].image + '"></img><img src="img/bookingemployeeid.png" class="employee_id_display"><p class="firstname">' + list[i].emp_name + '<p class="lastname">Last name</p><p class="emps_id">1001</p><p class="arrays">' + serc + '</p></div></div>';
};
document.querySelector('#employee_list').innerHTML = lis;
};
$('body').on('click', '.employeeimages', function() {
var name = $(this).closest('.customize').find('.firstname').text();
var service = [];
service = $(this).closest('.customize').find('.arrays').text();
console.log(service);
//var myString = "Mr. Jack Adams";
// Create a variable to contain the array
var mySplitResult;
// Use the string.split function to split the string
mySplitResult = service.split(",");
for (i = 0; i < mySplitResult.length; i++) {
console.log(mySplitResult[i]);
$("#booktable").append('<tr><td><div class="maindiv"><div class="productdiv"><p class="select_product">Select Items</p></div><div class="employeediv"><p>' + mySplitResult[i] + '</p></div><div class="pricediv">Price</div></div></td></tr>');
}
rowspans = mySplitResult.length;
get_values(name, table_selected_index);
$(".select_employee_div").css("display", "none");
});
//booking main table
//add row to booking table
$(".useradd").click(function() {
var rows = $('#booktable tr').length;
var rowcount = rows + 1;
$("#booktable").append('<tr><td id=' + rowcount + ' class="f">' + rowcount + '</td><td><div class="maindiv"><div class="productdiv"><p class="select_product">Select Items</p></div><div class="employeediv"><input type="button" class="select_employee" value="Select Employee"></div><div class="pricediv">Price</div><div class="actiondiv"><input type="button" value="x" class="remove"/></div></div></td></tr>');
});
//remove row and dynamically changing the index value of the removed row
$("body").on("click", ".remove", function(event) {
event.preventDefault();
var table = 'booktable';
var row = $(this).closest('tr');
setTimeout(function() { // Simulating ajax
var siblings = row.siblings();
row.remove();
siblings.each(function(index) {
$(this).children().first().text(index + 1);
});
}, 100);
});
$('#booktable').on('click', '.select_employee', function() {
$(".select_employee_div").css("display", "block");
var indexOfTheChangedRow = $(this).closest("tr").index();
table_selected_index = indexOfTheChangedRow;
});
function get_values(val, rowIndex) {
console.log("inside get_values function");
console.log(val);
$('#booktable tr:eq(' + rowIndex + ')').find(".select_employee").val(val);
$('#booktable tr:eq(' + rowIndex + ')').find(".f").attr("rowspan", rowspans + 1)
};
This is my table structure I need
这是我需要的表结构
 
Here is a fiddle demo that I have implement. I am struck with changing the row index and remove action.Fiddle Demo Please help me code. Thank you in advance.
这是我实现的小提琴演示。我很惊讶改变行索引并删除action.Fiddle Demo请帮我编码。先谢谢你。
3 个解决方案
#1
2
You can use the code below for removing the row base on rowspan and reIndex the remaining row:
您可以使用下面的代码删除rowspan上的行基,并重新索引剩余的行:
$('body').on('click','.remove',function(e) {
e.preventDefault();
var row=$(this).closest('tr');
var rowspan=parseInt(row.children().first().attr('rowspan'));
//remove row
if (isNaN(rowspan)) {
row.remove();
} else {
$('#booktable tr').slice(row.index(), row.index() + rowspan).remove();
}
//reindex
var newIndex = 0;
$('#booktable tr').each(function(i) {
if ($(this).children().first().attr('id') !== undefined) {
newIndex++;
$(this).children().first().text(newIndex);
}
});
});
#2
8
This is probably what you are looking for:
这可能是您正在寻找的:
$('body').on('click', '.remove', function(e){
e.preventDefault();
var row=$(this).closest('tr');
row.nextAll().each(function(){
if ($('td',this).is('[rowspan]')){
$(this).remove()
} else {
row.remove(); // before exit from loop
return false;
}
})
row.remove(); //for the last TR
$('tr').each(function(i) {
$('td:first',this).text(i+1); //For re-index
});
})
Or if you need to remove only the first and the next 2 rows, this should fix your problem:
或者,如果您只需要删除第一行和后两行,这应该可以解决您的问题:
$('body').on('click', '.remove', function(e){
e.preventDefault();
var row = $(this).closest('tr');
row.add(row.nextAll().slice(0,2)).remove();
});
Thanks to the answare: Jquery Next/NextAll/NextUntil with count limit
感谢answare:Jquery Next / NextAll / NextUntil具有计数限制
#3
1
You can use the value of rowspan to count how many rows you have to delete $('td:first',row).attr('rowspan')-1
您可以使用rowspan的值来计算您必须删除的行数$('td:first',row).attr('rowspan') - 1
http://jsfiddle.net/VixedS/af0Ljbzt/
$('body').on('click', '.remove', function(e){
e.preventDefault();
var row=$(this).closest('tr');
row.nextAll().slice(0,$('td:first',row).attr('rowspan')-1).each(function(){
$(this).remove()
});
row.remove();
$('tr:has(".f")').each(function(i) {
$('td.f',this).text(i+1);
});
});
#1
2
You can use the code below for removing the row base on rowspan and reIndex the remaining row:
您可以使用下面的代码删除rowspan上的行基,并重新索引剩余的行:
$('body').on('click','.remove',function(e) {
e.preventDefault();
var row=$(this).closest('tr');
var rowspan=parseInt(row.children().first().attr('rowspan'));
//remove row
if (isNaN(rowspan)) {
row.remove();
} else {
$('#booktable tr').slice(row.index(), row.index() + rowspan).remove();
}
//reindex
var newIndex = 0;
$('#booktable tr').each(function(i) {
if ($(this).children().first().attr('id') !== undefined) {
newIndex++;
$(this).children().first().text(newIndex);
}
});
});
#2
8
This is probably what you are looking for:
这可能是您正在寻找的:
$('body').on('click', '.remove', function(e){
e.preventDefault();
var row=$(this).closest('tr');
row.nextAll().each(function(){
if ($('td',this).is('[rowspan]')){
$(this).remove()
} else {
row.remove(); // before exit from loop
return false;
}
})
row.remove(); //for the last TR
$('tr').each(function(i) {
$('td:first',this).text(i+1); //For re-index
});
})
Or if you need to remove only the first and the next 2 rows, this should fix your problem:
或者,如果您只需要删除第一行和后两行,这应该可以解决您的问题:
$('body').on('click', '.remove', function(e){
e.preventDefault();
var row = $(this).closest('tr');
row.add(row.nextAll().slice(0,2)).remove();
});
Thanks to the answare: Jquery Next/NextAll/NextUntil with count limit
感谢answare:Jquery Next / NextAll / NextUntil具有计数限制
#3
1
You can use the value of rowspan to count how many rows you have to delete $('td:first',row).attr('rowspan')-1
您可以使用rowspan的值来计算您必须删除的行数$('td:first',row).attr('rowspan') - 1
http://jsfiddle.net/VixedS/af0Ljbzt/
$('body').on('click', '.remove', function(e){
e.preventDefault();
var row=$(this).closest('tr');
row.nextAll().slice(0,$('td:first',row).attr('rowspan')-1).each(function(){
$(this).remove()
});
row.remove();
$('tr:has(".f")').each(function(i) {
$('td.f',this).text(i+1);
});
});