如何计算具有 rowspan 属性的表行

Question

您好，我正在动态创建一个表结构。当我单击一个包时，我将子行插入到表中，并添加了一个带有子值计数的行跨值。现在我必须对我使用的行索引的行进行编号，但是当存在行跨度时，它应该考虑整行，因为说 1 下一个数字必须是 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)

  };

这是我需要的表结构

 

这是一个我已经实现的小提琴演示。我对更改行索引和删除操作感到震惊。Fiddle Demo 请帮我编码。提前谢谢你。

Answer 1

这可能就是你要找的东西：

$('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
    });
})

或者，如果您只需要删除第一行和接下来的 2 行，这应该可以解决您的问题：

$('body').on('click', '.remove', function(e){
    e.preventDefault();
    var row = $(this).closest('tr');
    row.add(row.nextAll().slice(0,2)).remove();
});

感谢答案：Jquery Next/NextAll/NextUntil with count limit

Answer 2

您可以使用下面的代码来删除基于 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);
        }
    });
});

Answer 3

你可以使用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);
    });
  });