提问者:小点点

如何使用jquery函数将<div>标记转换为<tr>和<td>标记?


关于将

标记转换为标记的问题,我试图遵循@ishtiaq-Ahmed和@yob的答案。 但是,输出并不实际显示函数的功能,而是将
类保留为
类。 代码如下:

null

var div2table = $('.tr').map(function() {
  var issue = $(this);
  var tdline = issue.find('.td').map(function() {
    return '<td>' + $(this).text();
  }).get().join('</td>');
  return '<tr>' + tdline + '</td>';
}).get().join('</tr>');

div2table = '<table>' + div2table + '</tr></table>';

console.log(div2table);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='tr'>
  <div class='td'>this will be 1st TD</div>
  <div class='td'>this will be 2nd TD</div>
  <div class='td'>this will be 3rd TD</div>
</div>
<div class='tr'>
  <div class='td'>this will be 1st TD</div>
  <div class='td'>this will be 2nd TD</div>
  <div class='td'>this will be 3rd TD</div>
</div>
<div class='tr'>
  <div class='td'>this will be 1st TD</div>
  <div class='td'>this will be 2nd TD</div>
  <div class='td'>this will be 3rd TD</div>
</div>

null

有什么办法可以解决这个问题吗? 我做错了什么?


共1个答案

匿名用户

为了便于访问,我在元素周围添加了一个容器,并将其内容替换为函数的输出

null

var div2table = $('.container .tr').map(function() {
  var issue = $(this);
  var tdline = issue.find('.td').map(function() {
    return '<td>' + $(this).text();
  }).get().join('</td>');
  return '<tr>' + tdline + '</td>';
}).get().join('</tr>');

div2table = '<table>' + div2table + '</tr></table>';

$('.container').html(div2table);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class='tr'>
    <div class='td'>this will be 1st TD</div>
    <div class='td'>this will be 2nd TD</div>
    <div class='td'>this will be 3rd TD</div>
  </div>
  <div class='tr'>
    <div class='td'>this will be 1st TD</div>
    <div class='td'>this will be 2nd TD</div>
    <div class='td'>this will be 3rd TD</div>
  </div>
  <div class='tr'>
    <div class='td'>this will be 1st TD</div>
    <div class='td'>this will be 2nd TD</div>
    <div class='td'>this will be 3rd TD</div>
  </div>
</div>