jquery按顺序安插内容
日期：2014-05-17 浏览次数：20434 次
jquery按顺序插入内容
有一级复选框
<input type="checkbox" name="prosize" value="38">38
<input type="checkbox" name="prosize" value="39">39
<input type="checkbox" name="prosize" value="40">40
<input type="checkbox" name="prosize" value="41">41
<input type="checkbox" name="prosize" value="42">42
根据点击复选框．来插入相应的内容
在向表格中插入内容的时候．比如我现在选择39，可以插入，
选择40也可以插入
如果我现在再选择38，他会插入到40下面去．
如何将前面的复选框按顺序插入进去呢．
就是选择了39和40以后，如果我再选择38，38的内容会出现在39的前面．而不是出现在40的后面？
------解决方案--------------------
另外一种效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Script/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("input[name='prosize']").click(function () {
if ($(this).attr("checked")) {
var _html = gettd($(this).val());
$("#temp").append(_html);
}
else {
$("#temp").find("." + $(this).val()).remove();
}
});
function gettd(size) {
var html = "<p class='" + size + "'>尺码:" + size + "<input type='text' value='款号'></p>";
return html;
}
});
</script>
</head>
<body>
<
有一级复选框
<input type="checkbox" name="prosize" value="38">38
<input type="checkbox" name="prosize" value="39">39
<input type="checkbox" name="prosize" value="40">40
<input type="checkbox" name="prosize" value="41">41
<input type="checkbox" name="prosize" value="42">42
根据点击复选框．来插入相应的内容
$("input[name='prosize']").click(function(){
if($(this).attr("checked"))
{
var html=gettd($(this).val());
$("#"+$(this).val()).append(html);
}
else
{
$("."+$(this).val()).remove();
}
});
function gettd(size)
{
var html = "<p class='"+size+"'>尺码:"+size+"－<input type='text' value='款号'></p>";
return html
}
在向表格中插入内容的时候．比如我现在选择39，可以插入，
选择40也可以插入
如果我现在再选择38，他会插入到40下面去．
如何将前面的复选框按顺序插入进去呢．
就是选择了39和40以后，如果我再选择38，38的内容会出现在39的前面．而不是出现在40的后面？
------解决方案--------------------
另外一种效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Script/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("input[name='prosize']").click(function () {
if ($(this).attr("checked")) {
var _html = gettd($(this).val());
$("#temp").append(_html);
}
else {
$("#temp").find("." + $(this).val()).remove();
}
});
function gettd(size) {
var html = "<p class='" + size + "'>尺码:" + size + "<input type='text' value='款号'></p>";
return html;
}
});
</script>
</head>
<body>
<
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
