CODEWITHSUNDEEP
jquery
Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

how to replace the html tag

I wanted to replace the td tag with div tag

From:

<td class="someclass" id="someid">some content</td>

To:

<div class="someclass" id="someid">some content</div>

So, how can I replace just td to div any other things remaining the same?

I know this will probably cause some problem but I want to do it anyway for some reason.

Upvotes: 0

Views: 64

Answers (5)

Ravimallya
Ravimallya

Reputation: 6600

http://jsfiddle.net/ravimallya/8xnSN/ has a method to convert asp.net gridview to responsive tables. you can tweak the code to get desired output.

Code:

$(document).ready(function () {
    var gridClass = $('.mGrid');
    // counts total number of td in a head so that we can can use it for label extraction
    var head_col_count = $(gridClass).find('tbody th').size();

    // loop which replaces td
    for (i = 0; i <= head_col_count; i++) {
        // head column label extraction
        var head_col_label = $(gridClass).find('tbody th:nth-child(' + i + ')').text();
        // replaces td with <div class="column" data-label="label">
        $(gridClass).find('tr td:nth-child(' + i + ')').replaceWith(function () {
            return $('<div class="column" data-label="' + head_col_label + '">').append($(this).contents());
        });
    }
    // replaces table with <div class="table">
    $(gridClass).replaceWith(function () {
        return $('<div class="div-table">').append($(this).contents());
    });

    // replaces thead with <div class="table-head">
    $('.div-table tbody tr:first-child').replaceWith(function () {
        return $('<div class="table-head">').append($(this).contents());
    });
    // replaces tbody with <div class="table-container">
    $('.div-table tbody').replaceWith(function () {
        return $('<div class="table-container">').append($(this).contents());
    });
    // replaces tr with <div class="table-row">
    $('.div-table tr').replaceWith(function () {
        return $('<div class="table-row">').append($(this).contents());
    });
    // replaces th with <div class="column">
    $('.div-table th').replaceWith(function () {
        return $('<div class="column">').append($(this).contents());
    });
});\

Upvotes: 0

Sridhar R
Sridhar R

Reputation: 20408

Use Jquery plugin to convert tabular data into divs plugins from this page

https://github.com/ryandoom/jquery-plugin-table-to-div

Example Target Table

    <div id="place_converted_data_should_go"></div>

    <table class="my_table">
      <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <td>Company</td>
        <td>Image Path</td>
        <td>Address</td>
        <td>Address 2</td>
        <td>City</td>
        <td>State</td>
        <td>Zip</td>
      </tr>
     <tr>
     <td>Ryan</td>
    <td>Doom</td>
    <td>Web Ascender</td>
    <td>/whatever/something.jpg</td>
    <td>4151 Okemos Rd</td>
    <td>STE B</td>
    <td>Okemos</td>
    <td>Michigan</td>
    <td>48864</td>    
  </tr>
</table>

Script

<script type="text/javascript">
  jQuery(function() {      
    $(".my_table").table_to_div({prefix:'my_div',target:'#place_converted_data_should_go'});

    //$(".my_table").hide();
  }); 
</script>

Output

<div class="my_div_container">
   <div class="my_div_1 my_div_group">
      <div class="my_div_FirstName my_div_row">
         <label>First Name</label>
         <span>Ryan</span>
      </div>
      <div class="my_div_LastName my_div_row">
         <label>Last Name</label>
         <span>Doom</span>
      </div>
      <div class="my_div_Company my_div_row">
         <label>Company</label>
         <span>Web Ascender</span>
      </div>
      <div class="my_div_ImagePath my_div_row">
         <label>Image Path</label>
         <span>/whatever/something.jpg</span>
      </div>
      <div class="my_div_Address my_div_row">
         <label>Address</label>
         <span>4151 Okemos Rd</span>
      </div>
      <div class="my_div_Address2 my_div_row">
         <label>Address 2</label>
         <span>STE B</span>
      </div>
      <div class="my_div_City my_div_row">
         <label>City</label>
         <span>Okemos</span>
      </div>
      <div class="my_div_State my_div_row">
         <label>State</label>
         <span>Michigan</span>
      </div>
      <div class="my_div_Zip my_div_row">
         <label>Zip</label>
         <span>48864</span>
      </div>
   </div>

Upvotes: 0

Mike Robinson
Mike Robinson

Reputation: 25159

The browsers will try to adapt to this sudden and somewhat disturbing change, and may even succeed.

However this ignores the fact that a <td> is a child of a <tr>, which itself is a child of a <table>. The browser will be trying to render a table, and all of a sudden you will remove a table cell and inject a div straight into a row.

Will it work? Probably, sort of. Should you do it? NO!

Upvotes: 3

Nish Rathi
Nish Rathi

Reputation: 254

You can replace any HTML markup by using jQuery's .replaceWith() method.

example: JSfiddle

Upvotes: 0

Sterling Archer
Sterling Archer

Reputation: 22395

IIRC, HTML tags are immutable. Try something like this:

$("#someid").replaceWith($("<div>"+$("#someid").html()+"</div>"));

Upvotes: 0

Related Questions