Question

这对其他人来说是如此基本，但对我而言，我有并发症。如何在下面的脚本中添加表？我想用带有行的表替换文本内容。请检查代码，看看你能给我什么。

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Tabs - Vertical Tabs functionality</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
  $(function() {
   $( "#tabs" ).tabs({event: "mouseover"}).addClass( "ui-tabs-vertical ui-helper-clearfix" );
   $( "#tabs li" ).removeClass( "ui-corner-top" ).addClass( "ui-corner-left" );
});
  </script>
  <style>
  .ui-tabs-vertical { width: 55em; }
  .ui-tabs-vertical .ui-tabs-nav { padding: .2em .1em .2em .2em; float: left; width: 12em; }
  .ui-tabs-vertical .ui-tabs-nav li { clear: left; width: 100%; border-bottom-width: 1px !important; border-right-width: 0 !important; margin: 0 -1px .2em 0; }
  .ui-tabs-vertical .ui-tabs-nav li a { display:block; }
  .ui-tabs-vertical .ui-tabs-nav li.ui-tabs-active { padding-bottom: 0; padding-right: .1em; border-right-width: 1px; border-right-width: 1px; }
  .ui-tabs-vertical .ui-tabs-panel { padding: 1em; float: right; width: 40em;}
  </style>
</head>
<body>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="#tabs-2">Tab 2</a></li>
    <li><a href="#tabs-3">Tab 3y</a></li>
    <li><a href="#tabs-4">Tab 4</a></li>
  </ul>
  <div id="tabs-1">
<h2>REPLACE WITH TABLE 1</h2>
    <p>REPLACE WITH ROW</p>
  </div>
  <div id="tabs-2">
    <h2>REPLACE WITH TABLE 2</h2>
    <p>REPLACE WITH TABLE</p>
  </div>
  <div id="tabs-3">
    <h2>REPLACE WITH TABLE 3</h2>
    <p>REPLACE WITH TABLE</p>
  </div>
    <div id="tabs-4">
    <h2>REPLACE WITH TABLE 4</h2>
    <p>REPLACE WITH TABLE</p>
  </div>
</div>


</body>
</html>

Answer 1

尝试

$('#tabs > div').each(function(){
    var $this = $(this);
    var $table = $('<table />').append('<thead><tr><th>' + $this.children('h2').html() + '</th></tr></thead>');

    $this.children('p').each(function(){
        $table.append('<tr><td>' + $(this).html() + '</td></tr>')
    });

    $this.replaceWith($table);
})

演示：Fiddle

在jquery中添加表

1 个答案: