Split an HTML table into two tables dynamically using JavaScript

Within my ASP.net user control, I am dynamically generating an HTML table from the code behind. The initial structure is outlined below:

 <table>
  <tr>
        <td>Property1</td>
        <td>Property2</td>
        <td>Property3</td>
        <td>Property4</td>
  </tr>
  <tr>
        <td>Value1</td>
        <td>Value2</td>
        <td>Value3</td>
        <td>Value4</td>
  </tr>
</table>

The challenge I face is that I need to rearrange the table based on the size of the container it will be placed in (since it's a user control). For example, if each cell has a width of 20px and the container's width is only 40px, the structure should look like this:

<table>
  <tr>
    <td>Property1</td>
    <td>Property2</td>
  </tr>
  <tr>
    <td>Value1</td>
    <td>Value2</td>
  </tr>
</table>

<table>
  <tr>
    <td>Property3</td>
    <td>Property4</td>
  </tr>
  <tr>
    <td>Value3</td>
    <td>Value4</td>
  </tr>
</table>

Answer №1

Thank you for the input @user8217649. I managed to resolve the issue with the help of jQuery after some effort. Below is the snippet of my HTML code.

    <table id="sourceTable">
<tr>
    <td>Column 1</td>
    <td>Column 2</td>
    <td>Column 3</td>
</tr>
<tr>
    <td>Column 1 - value</td>
    <td>Column 2 - value</td>
    <td>Column 3 - value</td>
</tr>
 </table>

 <table id="targetTable">
 </table>

Below is the jQuery script that was used.

var $target = $("#targetTable");

$("#sourceTable tr").each(function() {
var $tds = $(this).children(),
    $row = $("<tr></tr>");
    var i=1;
 while(i<3)
 {
     alert(i);
     $row.append($tds.eq(i).clone()).appendTo($target);
    i++;
 }
});

I hope this solution can benefit others facing a similar challenge.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Show product name when hovering over the image

Trying to achieve a hover effect where product titles appear in a contained box when hovering over the product image on the bottom overlay, instead of below the image itself. Tried CSS code recommended by Shopify, but it had no effect: <noscript> ...

Update the icon within the aud_play_pause() function

I'm currently working on a project that involves an image controlling the play and pause functionality of a track. I need to switch the image source between play.png and pause.png based on whether the track is playing or not. The code I have successf ...

Even as I raise the value of the text content, the decrease button remains unresponsive

I am facing a challenge in enabling the decrease button only when the value of textcontent is higher than 1. My intention is to gradually increase the value from 1 upwards while allowing the decrease button, but once the value reaches 1, I want the decre ...

When inserting a page break after a section, it seamlessly flows to the next page during printing

When should the CSS properties page-break-after: always or before be used? I have tried various methods, such as creating different div elements for page-break, adjusting float and clear:both, but have not had any success. There are currently four section ...

Trouble arises when attempting to compile NextJS & Sass Global stylesheets for deployment on Vercel

Currently, I am generating static pages with components in NextJS. Utilizing Bootstrap and SASS with a global styles.scss file. Encountering an issue when attempting to deploy my application to Vercel from my Github repository, as it fails during the comp ...

Display a pop-up message asking for confirmation within a set duration?

Is there a way to display a confirmation dialogue that is set to expire after a certain time, triggering one of two actions if the user does not respond? Specifically, the confirmation should expire if the user: a) navigates away from the page b) fails t ...

Encountering an error with an undefined callback argument within an asynchronous function

I encountered an issue while working with the viewCart function. I have implemented it in the base controller and am calling it from the home controller. However, I am facing an error where the callback argument in home.js is showing up as 'undefined& ...

JavaScript post method for JSON data: no input or output values

I am currently developing a page that extracts data from an HTML table consisting of two columns and an index of a form, and then converts it into a JSON string. The intention is to pass this data into PHP for further processing, perform calculations on th ...

Using AJAX to retrieve the title of the HTML document after it has been loaded (jQuery)

I am incorporating an HTML page into a landing page's body using jQuery and Ajax. I am trying to extract the <title>Page Title</title> from the loaded document to display on the landing page. Here is what I have attempted so far, but it h ...

Are there any available polyfills for downloading links using data URIs?

My issue involves generating code from the server: <a download="test.csv" href="data:text/plain;charset=utf-8;base64,w4FydsOtenTFsXLFkXTDvGvDtnJmw7p0w7Nnw6lwLg=="> teszt </a> This solution currently works with Chrome, Firefox, and Opera. ...

Verify for redundant entries in the database when the button is clicked

I have a specific requirement that involves verifying whether the user is repeatedly inputting the same Project and Survey No. An alert should be triggered if the same combination is entered twice upon button click. Below is the HTML code snippet: <t ...

Unexpected wrapping behavior in the input element when using Bootstrap grid system

While working on the email client sidebar, I encountered an issue where the content in the main body area would wrap incorrectly when the screen size decreased. I'm struggling to identify what's causing this behavior. body { background-color ...

Enhance the editing capabilities of the Json data form

https://i.stack.imgur.com/YZIjb.png My goal is to enhance a form for editing json data by moving beyond the typical <textarea /> tag and making it more user-friendly. Are there any tools available that can help improve the form's usability? Add ...

Enhance the speed of HttpResponseMessage by utilizing asynchronous tasks

In the controller of C# Framework 4.7.2 API, I am implementing a method that needs to be asynchronous to avoid blocking the thread (as explained in this article) during a heavy process. This allows the service to handle requests from other clients while th ...

Setting ng-click on a custom element directive in Angular 1.x: A guide

Within this code, I have assigned ng-click to a custom element directive with the expectation that clicking the rendered text would trigger an alert saying "Worked from directive!" However, the functionality does not seem to be working as intended. Althou ...

Is there a way to tally up the number of green items and display a <p> tag when every item has been marked green?

I have created a checklist that includes checkboxes. I am looking to display some text when all the checkboxes are checked and green. Can someone assist me with writing the code for this functionality? $(document).ready(function() { $("i").click(funct ...

Glowing Rhandsontable - Custom Renderer - Apply color based on factor (Palette)

I have successfully generated a dataset where I assigned color codes to a column based on values from another column. colourCount = length(unique(Desc.File$VARIABLECODE)) getPalette = colorRampPalette(brewer.pal(9, "Set1")) Colors <- getPalette(colour ...

Having trouble getting the jQuery/JS redirect button to function properly

I'm fairly new to working with jQuery. My current challenge involves unsetting a cookie and then navigating to the next page. There are numerous resources discussing this topic online, but what seemed like a simple task has turned into a two-hour hea ...

How can I create two left-aligned columns in CSS, with the first column being fixed in place?

Is there a way to create two columns without using HTML tables? I'm looking for the first column to contain an image and the second column to display text aligned left, extending to the rest of the page width. I found this CSS solution for the first ...

Add a fresh item into an array in Json between existing elements

After looping through a JSON object using foreach, the output is as follows: {"Comment": {"id":"1","post_id":"31","created":"14263241"} , "User": {"fname":"Test","lname":"Test2"} } {"Comment": {"id":"2","post_id":"32","created":"14263257"} , "User": {"f ...