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

What are the best practices for utilizing the JQuery hasData() method effectively?

Actions for jQuery's mouseenter and mouseleave events

Using @font-face with Rails version 2.3.8

The main-panel div's width increase is causing the pages to extend beyond the window's width limit

Validation message causing Bootstrap form inline to lose center alignment

How to retrieve Rails params hash using jQuery

Alter numerous classifications based on varying circumstances at regular intervals

Is it possible to generate multiple modal windows with similar designs but varying content?

Add a date to my database using an HTML form

Bootstrap grid columns cannot properly handle overflowing content

The outcome from the PHP file was JSON data, refrain from interpreting it as plain text

Setting the height of a box-inner div to full height in Bootstrap 4: A guide

Disabling the scrollbar on a modal and enabling it on a custom div within the modal

Searching for the final element within identical divs using Selenium in Python

What is the method for accessing a local XML file with $.ajax?

Align a component vertically in a FlexBox using Material UI

header color scheme and dimensions

What is the best way to extract user input from a web form and utilize it to perform a calculation using jQuery?

How does JQuery handle color parsing in text?

The aesthetic of react-bootstrap and material ui aesthetics is distinctive and visually appealing