Question

我想用div标签

替换td标签

自：

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

要：

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

那么，我怎样才能将td替换为div以保留其他任何相同的东西？

我知道这可能会引起一些问题，但我还是出于某种原因想要这样做。

Answer 1

浏览器将尝试适应这种突然且有些令人不安的变化，甚至可能成功。

然而，这忽略了<td>是<tr>的孩子这一事实，<table>本身就是{{1}}的孩子。浏览器将尝试渲染一个表，突然之间你将删除一个表格单元格并将div直接插入一行。

会起作用吗？可能有点像。你应该这样做吗？的 NO！

Answer 2

IIRC，HTML标签是不可变的。尝试这样的事情：

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

Answer 3

您可以使用jQuery的.replaceWith()方法替换任何HTML标记。

示例：JSfiddle

Answer 4

使用Jquery插件将表格数据转换为此页面的divs插件

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

示例目标表

    <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 type="text/javascript">
  jQuery(function() {      
    $(".my_table").table_to_div({prefix:'my_div',target:'#place_converted_data_should_go'});

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

输出

<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>

Answer 5

http://jsfiddle.net/ravimallya/8xnSN/有一种将asp.net gridview转换为响应表的方法。你可以调整代码以获得所需的输出。

代码：

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

如何替换html标签

5 个答案: