读书人
栏目▼

jquery按顺序安插内容

发布时间： 2013-05-02 09:39:29 作者： rapoo

jquery按顺序插入内容
本帖最后由 fxxyz 于 2013-04-24 13:14:20 编辑 有一级复选框
<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>
<input type="checkbox" name="prosize" value="38" />38<br/>


<input type="checkbox" name="prosize" value="39" />39<br/>
<input type="checkbox" name="prosize" value="40" />40<br/>
<input type="checkbox" name="prosize" value="41" />41<br/>
<input type="checkbox" name="prosize" value="42" />42<br/>
<div id="temp"></div>
</body>
</html>
[解决办法]
在选取的时候不要去获取值，在提交的时候再去获取被选中的checkbox的值肯定就是顺序的了。
function getCheckbox() {
var str="";
$("input[name='checkbox']:checkbox").each(function(){
if($(this).attr("checked")){
str += $(this).val()+","
}
})
str.split(",");
alert(str[0]);
}
在.NET后台可以用这样的方法获取
string checkStr = Request["prosize"];

[解决办法]
jQuery(document).ready(function () {
jQuery("input[type='checkbox'][name='prosize']").click(function () {
alert(setVal());
});
});
var _ilist = "";
function setVal() {
_ilist = "";
jQuery("input[type='checkbox'][name='prosize']:checked").each(function (i, item) {
_ilist = _ilist + jQuery(item).val() + ",";
});
return _ilist.length > 0 ? _ilist.substring(0, _ilist.length - 1) : "";
}
[解决办法]

引用:
引用:
jQuery(document).ready(function () {
jQuery("input[type='checkbox'][name='prosize']").click(function () {
alert(setVal());
});
……


程序这东西不用太死脑筋,这样是写不出好代码的,有时换个思路,你就发现原来还可以这么简单去实现

其实这样总比你一个个去比较的要好,我每次都先清空一次,然后只用遍历一次就可以了,你的排序还需要用两个循环做比较(排序算法)
[解决办法]
引用:
本帖最后由 fxxyz 于 2013-04-24 13:14:20 编辑有一级复选框
<input type="checkbox" name="prosize" value="38">38
<input type="checkbox" name="prosize" value="39">39
<input type="checkbox" name="prosize" value="40">4……


给你个样例吧
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="Scripts/jquery-1.4.1.min.js"></script> 
 
    <script language="javascript" type="text/javascript">
        $(document).ready(function () {

            $("input[name='prosize']").click(function () {
                if ($(this).attr("checked")) {
                    var html = gettd($(this).val());
                    if ($("#haha p").length == 0) {
                        $("#haha").append(html); //haha是我加的div在这个中显示html内容
                    }
                    else {
                        var pb = $("#haha p");
                        var sizes; //比较的size
                        for (var i = 0; i < pb.length; i++) {
                            sizes = pb.eq(i).attr("class");
                            if ($(this).val() < sizes) {
                                break;
                            }
                        }
                        if (i == pb.length) {
                            //没有比当前选择的size大的 就在最后加
                            $("#haha").append(html);
                        } else {
                            //有比当前选择的size大的，在同级的(P标签)前面加上此html
                            $("." + sizes).before(html); 
                        }  
 
                    }
                }
                else {
                    $("." + $(this).val()).remove();
                }
            });
        })




        function gettd(size) {
            var html = "<p class='" + size + "'>尺码:" + size + "－<input type='text' value='款号'/></p>";
            return html;
        } 



    
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <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
        <div id="haha">
        </div>
    </div>
    </form>
</body>
</html>


你把其中的jquery引用的位置 换掉就可以了
[解决办法]
写了一个比较浅显的，应该比较好看懂

<!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 () {
var ary = new Array();
$("input[name='prosize']").click(function () {
if ($(this).attr("checked")) {
var _html = gettd($(this).val());
ary.push(_html);
ary.sort(function (a, b) {


var _a = parseInt($(a).attr("class"), 10);
var _b = parseInt($(b).attr("class"), 10);
return _a > _b ? 1 : -1;
});
$("#temp").html(ary.join(""));
}
else {
var _delVal = $(this).val();
for (var i = 0, count = ary.length; i < count; i++) {
var _delIndex = $(ary[i]).attr("class");
if (_delVal == _delIndex) {
ary.splice(i, 1);
}
}
$("#temp").find("." + $(this).val()).remove();
}
});

function getCount() {
return $("#temp").children("p").length;
}

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<br/>
<input type="checkbox" name="prosize" value="39" />39<br/>
<input type="checkbox" name="prosize" value="40" />40<br/>


<input type="checkbox" name="prosize" value="41" />41<br/>
<input type="checkbox" name="prosize" value="42" />42<br/>
<div id="temp"></div>
</body>
</html>

读书人网 >asp.net

热点推荐

触屏版 | 电脑版

读书人网 m.reader8.net