Rearrange the characters within the variable before inserting them after

Question

Rearrange the characters within the variable before inserting them after

I'm currently dealing with an external system that generates outdated code, however, I do have access to css and javascript. The specific issue at hand involves working with a table that displays each item on a separate row, sometimes resulting in up to 30 rows. My objective is to split these 'tr' elements into groups of 6 rows, with 5 items in each row.

The initial approach was to modify the style of each 'tr' element to display as table cells, thereby arranging them horizontally. Subsequently, I planned to assign a class to every 5th row and then insert closing and opening 'tbody' and 'table' tags after each 5th 'tr' with the designated class. This procedure was intended to create individual tables for every group of 5 'tr' elements, effectively forming rows of 5 items each.

While most of the setup works as expected, I encountered an issue with the .insertAfter method. The desired behavior was to insert '<\tbody><\table class='tableBreaker'><\tbody>' after every 5th 'tr', unfortunately, it produced unexpected results by reversing the order and outputting '<\table class="tableBreaker"><\tbody><\tbody>'.

I've tried searching for any relevant information regarding how jquery handles string manipulations within the .insertAfter function, but haven't found any clear solutions yet.

Table HTML:


<!-- Table HTML content goes here -->

CSS:


/* CSS styles go here */

jQuery:


// jQuery script goes here

jquery html css

Answer 1

Answer №1

A new function is needed to transfer the specified number of rows, indicated by rowCount, to new table(s) while transferring the old table classes to the new one(s).

function rowTransfer(rowCount) {
  var oldTable = $('#mainContent_rbl_zoneList'),
    holder = oldTable.parent().eq(0),
    rows = oldTable.find('tr');
  var classes = oldTable.prop("classList");
  var temptable = $('<table>');
  $.each(classes, function(index, value) {
    temptable.addClass(value);
  });
  for (var i = 0; i < rows.length; i = i + rowCount) {
    var newTable = temptable.clone(),
      tbody = $('<tbody>');
    rows.slice(i, i + 5).appendTo(tbody);
    newTable.append(tbody).appendTo(holder);
  }
  oldTable.remove();
}
rowTransfer(5);

It is important to note that this could cause issues if there are event handlers attached to the old table, which would need to be addressed.

Additionally, the new tables are applied to the end of the parent container of the old tables.

To adjust the CSS, you can also add:

temptable.addClass("rowcontainer");

and

.rowcontainer tr {
    display: table-cell;
}

Feel free to experiment with this sample: https://jsfiddle.net/n3nqespn/

Answer 2

A new function is needed to transfer the specified number of rows, indicated by rowCount, to new table(s) while transferring the old table classes to the new one(s).

function rowTransfer(rowCount) {
  var oldTable = $('#mainContent_rbl_zoneList'),
    holder = oldTable.parent().eq(0),
    rows = oldTable.find('tr');
  var classes = oldTable.prop("classList");
  var temptable = $('<table>');
  $.each(classes, function(index, value) {
    temptable.addClass(value);
  });
  for (var i = 0; i < rows.length; i = i + rowCount) {
    var newTable = temptable.clone(),
      tbody = $('<tbody>');
    rows.slice(i, i + 5).appendTo(tbody);
    newTable.append(tbody).appendTo(holder);
  }
  oldTable.remove();
}
rowTransfer(5);

It is important to note that this could cause issues if there are event handlers attached to the old table, which would need to be addressed.

Additionally, the new tables are applied to the end of the parent container of the old tables.

To adjust the CSS, you can also add:

temptable.addClass("rowcontainer");

and

.rowcontainer tr {
    display: table-cell;
}

Feel free to experiment with this sample: https://jsfiddle.net/n3nqespn/

Answer 3

Answer №2

When working with the insertAfter function to create new tables, your main goal should be to move the rows into these new tables.

One way to achieve this is demonstrated below:

var $container = $('#mainContent_rbl_zoneList'),
    $rows = $('#mainContent_rbl_zoneList tr');

for(var i=0; i < $rows.length; i = i+5 ){
   var $newTable = $('<table>'), $tbody = $('<tbody>');
   $rows.slice(i, i+5).appendto($tbody);
   $newTable.append($tbody).appendTo($container);      

}

Please note that this code snippet serves as a basic example and may need adjustments to account for row classes.

Answer 4

When working with the insertAfter function to create new tables, your main goal should be to move the rows into these new tables.

One way to achieve this is demonstrated below:

var $container = $('#mainContent_rbl_zoneList'),
    $rows = $('#mainContent_rbl_zoneList tr');

for(var i=0; i < $rows.length; i = i+5 ){
   var $newTable = $('<table>'), $tbody = $('<tbody>');
   $rows.slice(i, i+5).appendto($tbody);
   $newTable.append($tbody).appendTo($container);      

}

Please note that this code snippet serves as a basic example and may need adjustments to account for row classes.

Rearrange the characters within the variable before inserting them after

Answer №1

Answer №2

Similar questions

Guide to applying conditional styling to Material-UI TextField

HTML Tutorial: A Beginner's Guide to Invoking REST API

Attempting to embed an image within the datepicker input

Select from the list

How can I stack images on top of each other using Div, CSS, and ZIndex?

Can login data be transferred from the index page to other pages?

How can I design DIVs to resemble a radio station or television schedule grid?

Integrate a PHP form that includes a redirect feature and an optional opt-in box

The form embedded within the <tr> element seems to be malfunctioning

Can you explain the significance of the "style.css?ver=1" tag?

Page redirection to a different URL after a successful AJAX call

What is the best way to use shortcodes to display custom fields for post objects, specifically products, within WordPress posts

How can the border of the select element be removed when it is active in select2

Can Spring Boot be set up to return JSON instead of HTML for InvalidTokenException when configuring OAuth2?

Discovering the droppable container that a draggable element is positioned within

printing on the internet without the hassle of a print window appearing

Ways to expand the width of mat-dialog-actions component in Angular 8

Adjusting the content and style of a div element upon clicking, and restoring the original settings when clicked once more

Trying to change the submit button value using jQuery is ineffective

How feasible is it to customize the "ionic-img-viewer" npm package or replicate its image styling in Ionic 2?