我正在使用JQuery中的动态表行创建器，基本上，它找到td并使用wrapInner，它将内容包装在DIV中的td中。在添加到tbody后，DIV被移除。不幸的是，当我在容器DIV中的内容中有DIV时，它也被移除了。有没有办法保留所有内部内容，只删除外部DIV标记？
感谢您的帮助 下面是添加表格行的代码（我用我的尝试评论了函数中的区域）：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Add new table rows with jQuery</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.AniRows.js" type="text/javascript"></script>
<link href="Styles/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<!--
This first example allows you to add rows and delete rows from the top of the table
-->
Add/Remove - Bottom Row<br />
<button id="addRowDemo1">Add a row</button>
<button id="removeRowDemo1">Remove a row</button>
<table id="Demo1" class="rounded-corner" summary="Anirows Demo 1">
<thead>
<tr>
<th scope="col" class="rounded-company">Company</th>
<th scope="col" class="rounded-q1">Q1</th>
<th scope="col" class="rounded-q2">Q2</th>
<th scope="col" class="rounded-q3">Q3</th>
<th scope="col" class="rounded-q4">Q4</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4" class="rounded-foot-left" style="border-right: 0px solid #fff;"><em>This is the footer, notice the plugin skips over it.</em></td>
<td class="rounded-foot-right"> </td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Inatech</td>
<td>20.3</td>
<td>30.5</td>
<td>23.5</td>
<td>40.3</td>
</tr>
<tr>
<td>CyberCyst</td>
<td>50.2</td>
<td>40.63</td>
<td>45.23</td>
<td>39.3</td>
</tr>
<tr>
<td>GlobalGlom</td>
<td>25.4</td>
<td>30.2</td>
<td>33.3</td>
<td>36.7</td>
</tr>
<tr>
<td>MegaSoft</td>
<td>20.4</td>
<td>15.6</td>
<td>22.3</td>
<td>29.3</td>
</tr>
</tbody>
</table>
<!--
Same thing here except now from bottom, this can be add from top remove from bottom, whatever you like.
-->
Add/Remove - Top Row<br />
<button id="addRowDemo2">Add a row</button>
<button id="removeRowDemo2">Remove a row</button>
<table id="Demo2" class="rounded-corner" summary="Anirows Demo 2">
<thead>
<tr>
<th scope="col" class="rounded-company">Company</th>
<th scope="col" class="rounded-q1">Q1</th>
<th scope="col" class="rounded-q2">Q2</th>
<th scope="col" class="rounded-q3">Q3</th>
<th scope="col" class="rounded-q4">Q4</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4" class="rounded-foot-left" style="border-right: 0px solid #fff;"><em>This is the footer, notice the plugin skips over it.</em></td>
<td class="rounded-foot-right"> </td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Inatech</td>
<td>20.3</td>
<td>30.5</td>
<td>23.5</td>
<td>40.3</td>
</tr>
<tr>
<td>CyberCyst</td>
<td>50.2</td>
<td>40.63</td>
<td>45.23</td>
<td>39.3</td>
</tr>
<tr>
<td>GlobalGlom</td>
<td>25.4</td>
<td>30.2</td>
<td>33.3</td>
<td>36.7</td>
</tr>
<tr>
<td>MegaSoft</td>
<td>20.4</td>
<td>15.6</td>
<td>22.3</td>
<td>29.3</td>
</tr>
</tbody>
</table>
<!--
This demo adds and removes rows that have controls in them...this could be asp.net controls or whatever you wante.
-->
Add row using row with controls<br />
<button id="addRowDemo3">Add a row</button>
<button id="removeRowDemo3">Remove a row</button>
<table id="Demo3" class="rounded-corner" summary="Anirows Demo 1">
<thead>
<tr>
<th scope="col" class="rounded-company">Company</th>
<th scope="col" class="rounded-q1">Q1</th>
<th scope="col" class="rounded-q2">Q2</th>
<th scope="col" class="rounded-q3">Q3</th>
<th scope="col" class="rounded-q4">Q4</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4" class="rounded-foot-left" style="border-right: 0px solid #fff;"><em>This is the footer, notice the plugin skips over it.</em></td>
<td class="rounded-foot-right"> </td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Inatech</td>
<td>20.3</td>
<td>30.5</td>
<td>23.5</td>
<td>40.3</td>
</tr>
<tr>
<td>CyberCyst</td>
<td>50.2</td>
<td>40.63</td>
<td>45.23</td>
<td>39.3</td>
</tr>
<tr>
<td>GlobalGlom</td>
<td>25.4</td>
<td>30.2</td>
<td>33.3</td>
<td>36.7</td>
</tr>
<tr id = "newRow">
<td>MegaSoft</td>
<td>20.4</td>
<td>15.6</td>
<td>22.3</td>
<td>29.3</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready(function () {
$("#addRowDemo1").click(function () {
$("#Demo1").addRow({
newRow: "<tr><td><div>Scubysoft</div></td><td>30.3</td><td>40.5</td><td>63.5</td><td>42.3</td></tr>"
});
$('#Demo1 tr td:not(:last-child)').addClass("rounded");
});
$("#removeRowDemo1").click(function () {
$("#Demo1").removeRow({});
});
$('#Demo1 tr td:not(:last-child)').addClass("rounded");
});
</script>
(function ($) {
var defaults = {
rowSpeed: 300,
newRow: null,
addTop: true,
removeTop: true
};
var newClasses = "newRow"
var options = $.extend(defaults, options);
$.fn.addRow = function (options) {
opts = $.extend(defaults, options);
var $table = $(this);
var $tableBody = $("tbody", $table);
var t = $(opts.newRow).find("td").wrapInner("<div style='display:none;' class='tempwrap'/>").parent()
if (opts.addTop) t.appendTo($tableBody);
else t.prependTo($tableBody);
t.attr("class", newClasses).removeAttr("id").show().find("td div").slideDown(options.rowSpeed, function () {
$(this).each(function (index) {
//alert(index + ': ' + $(this).text());
//*****************below are the two original lines********************************************
var $set = jQuery(this);
$set.replaceWith($set.contents());
//*****************end****************************************************************************
//*****************here are the lines I've tried (commented out - below)*********************
//var $set = jQuery(this).find(".tempwrap");
//jQuery(this).remove(".tempwrap");
//var $set = $(this).find(".tempwrap");
//$set.remove();//
//$set.replaceWith($set.contents());
//***************end********************************************************************************
}).end()
})
return false;
};
答案 0 :(得分：2)
答案 1 :(得分：0)
首先，您应该使用DIV的父元素，然后获取DIV的html内容，并在删除后将内容分配给父级。我认为这是由unwrap()函数完成的。
答案 2 :(得分：0)
您是否尝试过在jQuery中使用.html（）方法？看一看，它可能会有所帮助：http://jsfiddle.net/MK5u9/