100分求一简单的jquery应用!!!

在每个checkbox上加onclick事件，每次都重新生成json

如何做每次的checkbox点击生成json，请指点，谢谢，这是我现在的代码，只能在text中生成一行,如何追加每行生成的json到textbox?
$('#TitleGridView tr input[type=checkbox]').click(function() {                if ($(this).attr("checked") == true) {                    var strQuote = $.trim($('#txtRefQuote').val());                    if (strQuote == "") {                        var buffer = new StringBuilder();

                            buffer.append("{");
                            buffer.append("\"tablename\":");
                            buffer.append(tableName);         //全局变量
                            buffer.append(",\"field\":");
                            buffer.append(field);            //全局变量
                            buffer.append("}");                        $('#txtRefQuote').val(buffer.toString());
                    }
                    else {
                        alert("已选择但不为空");
                    }                }
                else {                    alert("取消了");
                }

我做一个简单的例子吧
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<script>
var object = new Object();//全局变量,用来记录checkbox的选择情况
function on_click(obj){
if(obj.checked){
eval("object.pro"+obj.value+"='"+obj.value+"';");//如果选中,记录进object
}else{
eval("object.pro"+obj.value+"='';");//如果取消选中,清楚该记录
}
var str="";
for(var i in object){//遍历object
if(object[i]=="")continue;
if(str!="")str+=",";
str+=object[i];
}
//设值
document.getElementById("txt1").value=str;
}
</script>
</head><body>
<input type=checkbox value=1 onclick="on_click(this)"><br>
<input type=checkbox value=2 onclick="on_click(this)"><br>
<input type=checkbox value=3 onclick="on_click(this)"><br>
<input type=checkbox value=4 onclick="on_click(this)"><br>
<input type=text id=txt1 value="">
</body>
</html>

我想下面这个例子够详细了：<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table 2 json</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var arrData = []; //这个就是你将要使用的json对象数组 //为每条数据绑定事件与变量：
$("#TitleGridView tr").each(function(){
//获取每个对象：
var _this = $(this);
var o_input = _this.find("input");
var o_title = _this.find("#title");
var o_printdate = _this.find("#printdate");

//生成单个json数据:
var data = {};
data.id = o_input.attr("id");
data.title = o_title.text();
data.printdate = o_printdate.text();

o_input.click(function(){
var index = $.inArray(data,arrData); //这句返回该对象在数组中的位置
if($(this).attr("checked")){
if(index<0){ //如果数组中不存在这个对象
arrData.push(data); //添加这个对象
}
}else{
if(index>=0){ //如果数组中存在这个对象
arrData.splice(index,1) //删除这个对象
}
}
$("#textbox").html(arrData2string());
});
}); //这个函数把arrData转换为字符串
function arrData2string(){
var arrString = [];
$.each(arrData,function(i,n){
arrString.push('{"id":"'+arrData[i].id+'","title":"'+arrData[i].title+'","printdate":"'+arrData[i].printdate+'"}');
});
return ("["+arrString.join(",")+"]");
}
});
</script>
<style type="text/css">
.data{}
</style>
</head>
<body>
<table id="TitleGridView" cellpadding="0" cellspacing="1" border="1" width="600">
  <tr class="data">
   <td><input id="table_news_001" type="checkbox"/></td>
   <td id="title">危机下的机遇</td>
   <td id="printdate">2009-07-06 </td>
  </tr>
  <tr class="data">
   <td><input id="table_news_002 " type="checkbox"/></td>
   <td id="title">谷歌的启示</td>
   <td id="printdate">2009-07-07</td>
  </tr>
</table>
<div id="textbox">
</div>
</body>
</html>

非常感谢pillar0514,lihui_shine
已经有点眉目了,真实生成的表格行Html如下<td><input id="TitleGridView_ctl02_ccc" type="checkbox" name="TitleGridView$ctl02$ccc" /></td><td><a href="../../../ArticleManage/ReadNews.aspx?numb=4418&tableName=dept_file_log" target="_blank">通知aaa</a></td><td>2009-7-3</td>
在<a>元素的连接截取numb,tableName的值拼接如下的json{"id":"441","tableName":"dept_file_log","printdate":"2009-7-3 "}请问如何截取？生成json?谢谢

data.id = _this.find("a").attr("href").......;后面如何取值呢，急?另外pillar0514兄生成的每条json能否换行？

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table 2 json</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
        var arrData = [];    //这个就是你将要使用的json对象数组    //为每条数据绑定事件与变量：
    $("#TitleGridView tr").each(function(){
        //获取每个对象：
        var _this = $(this); //取得这个TR本身的jquery对象
        var o_input = _this.find("input");
        var o_title = _this.find("a");
        var o_printdate = _this.find("td:eq(2)"); //取得这个TR里面的第三个td的jquery对象，2代表索引，从0开始计数

        //生成单个json数据:
        var data = {};
        data.id = o_input.attr("id");
        data.title = o_title.text();
        data.printdate = o_printdate.text();

        o_input.click(function(){
            var index = $.inArray(data,arrData);    //这句返回该对象在数组中的位置
            if($(this).attr("checked")){
                if(index<0){    //如果数组中不存在这个对象
                    arrData.push(data);    //添加这个对象
                }
            }else{
                if(index>=0){    //如果数组中存在这个对象
                    arrData.splice(index,1)            //删除这个对象
                }
            }
            $("#textbox").html(arrData2string());
$("#textarea").val(arrData2string_forTextarea());
        });
    });    //下面两个函数把arrData转换为字符串
    function arrData2string(){
        var arrString = [];
        $.each(arrData,function(i,n){
        // arrString.push('{"id":"'+arrData[i].id+'","title":"'+arrData[i].title+'","printdate":"'+arrData[i].printdate+'"}'); //这句就是用来生成单个数据对象的。
// 我不太清楚你想要的换行究竟是什么样，如果只是为了在HTML上显示，那就这样：
arrString.push('{"id":"'+arrData[i].id+'","title":"'+arrData[i].title+'","printdate":"'+arrData[i].printdate+'"}' + "<br/>"); //我把换行的HTML（<br/>）加在了末尾
        });
        return ("[<br/>"+arrString.join(",")+"]");
    }

    function arrData2string_forTextarea(){
        var arrString = [];
        $.each(arrData,function(i,n){
        // arrString.push('{"id":"'+arrData[i].id+'","title":"'+arrData[i].title+'","printdate":"'+arrData[i].printdate+'"}'); //这句就是用来生成单个数据对象的。
// 如果只是为了在textarea里面显示，那就这样：
arrString.push('{"id":"'+arrData[i].id+'","title":"'+arrData[i].title+'","printdate":"'+arrData[i].printdate+'"}' + "\r\n"); //我把换行标识（\r\n）加在了末尾
        });
        return ("[\r\n" +arrString.join(",")+ "]");
    }
});
</script>
</head>
<body>
<table id="TitleGridView" cellpadding="0" cellspacing="1" border="1" width="600">
  <tr>
      <td><input id="TitleGridView_ctl02_ccc" type="checkbox" name="TitleGridView$ctl02$ccc" /></td>
      <td><a href="../../../ArticleManage/ReadNews.aspx?numb=4418&tableName=dept_file_log" target="_blank">通知aaa </a></td>
      <td>2009-7-3 </td>
  </tr>
  <tr>
      <td><input id="TitleGridView_ctl03_ccc" type="checkbox" name="TitleGridView$ctl03$ccc" /></td>
      <td><a href="../../../ArticleManage/ReadNews.aspx?numb=4419&tableName=dept_file_log" target="_blank">通知bbb </a></td>
      <td>2009-7-4 </td>
  </tr>
  <tr>
      <td><input id="TitleGridView_ctl04_ccc" type="checkbox" name="TitleGridView$ctl04$ccc" /></td>
      <td><a href="../../../ArticleManage/ReadNews.aspx?numb=4420&tableName=dept_file_log" target="_blank">通知ccc </a></td>
      <td>2009-7-5 </td>
  </tr>
</table>
<br/>
<li>这里输出HTML：</li>
<div id="textbox" style="height:100px; border:#000000 1px solid;">
</div>
<br/>
<li>这里输出文本：</li>
<textarea id="textarea" style="width:100%; height:100px;"></textarea>
</body>
</html>

错误
$("td:last")是获得所有td后的数组的最后一个
应该是$("td:last-child")，这个才是所有行中的最后一个td的集合，要指定那一行的可以添加第二个上下文参数

非常感谢，不过我还是有几个小疑问：
1. 我的文本框是<input name="txtRefQuote" type="text" id="txtRefQuote" disabled="disabled" style="height:100px;width:98%;" />
只能用val()赋值，但用以下方法还是无法换行
function arrData2string() {
                var arrString = [];
                $.each(arrData, function(i, n) {
                arrString.push('{"refTable":"' + arrData[i].refTable + '","refField":"' + arrData[i].refField + '","refNumb":"' + arrData[i].refNumb + '","refDate":"' + arrData[i].refDate + '"}' + "\r\n");
                });
                return ("[\r\n" + arrString.join(",") + "]");
            }2 $.each(arrData,function(i,n) 方法中的参数n是指什么？
3.当取消所有行时，文本框里还有字符 "[ ]"?

1，input 只能显示单行文本，要显示多行文本，请用textarea。2, n是参数，在这个位置获取数组中的每一个对象，就是数组中的每一个元素本身。而i获取的是元素位置。
我想你需要仔细研究一下jquery的参考：http://dl.getdropbox.com/u/81097/jQueryAPI_CHM.CHM3，我修改了一下程序，但我想其实你也应该能做到。好好理解一下程序而不是直接使用，有助于你的提高：
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table 2 json</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
        var arrData = [];    //这个就是你将要使用的json对象数组    //为每条数据绑定事件与变量：
    $("#TitleGridView tr").each(function(){
        //获取每个对象：
        var _this = $(this); //取得这个TR本身的jquery对象
        var o_input = _this.find("input");
        var o_title = _this.find("a");
        var o_printdate = _this.find("td:eq(2)"); //取得这个TR里面的第三个td的jquery对象，2代表索引，从0开始计数

        //生成单个json数据:
        var data = {};
        data.id = o_input.attr("id");
        data.title = o_title.text();
        data.printdate = o_printdate.text();

        o_input.click(function(){
            var index = $.inArray(data,arrData);    //这句返回该对象在数组中的位置
            if($(this).attr("checked")){
                if(index<0){    //如果数组中不存在这个对象
                    arrData.push(data);    //添加这个对象
                }
            }else{
                if(index>=0){    //如果数组中存在这个对象
                    arrData.splice(index,1)            //删除这个对象
                }
            }
            $("#textbox").html(arrData2string());
$("#txtRefQuote").val(arrData2string_forTextarea());
        });
    });    //下面两个函数把arrData转换为字符串
    function arrData2string(){
        var arrString = [];
        $.each(arrData,function(i,n){
        // arrString.push('{"id":"'+arrData[i].id+'","title":"'+arrData[i].title+'","printdate":"'+arrData[i].printdate+'"}'); //这句就是用来生成单个数据对象的。
// 我不太清楚你想要的换行究竟是什么样，如果只是为了在HTML上显示，那就这样：
arrString.push('{"id":"'+arrData[i].id+'","title":"'+arrData[i].title+'","printdate":"'+arrData[i].printdate+'"}' + "<br/>"); //我把换行的HTML（<br/>）加在了末尾
        });
if(arrString.length>0){
return ("[<br/>"+arrString.join(",")+"]");
}else{
return ("");
}
    }

    function arrData2string_forTextarea(){
        var arrString = [];
        $.each(arrData,function(i,n){
        // arrString.push('{"id":"'+arrData[i].id+'","title":"'+arrData[i].title+'","printdate":"'+arrData[i].printdate+'"}'); //这句就是用来生成单个数据对象的。
// 如果只是为了在textarea里面显示，那就这样：
arrString.push('{"id":"'+arrData[i].id+'","title":"'+arrData[i].title+'","printdate":"'+arrData[i].printdate+'"}' + "\r\n"); //我把换行标识（\n）加在了末尾
        });
if(arrString.length>0){
         return ("[\r\n" +arrString.join(",")+ "]");
}else{
return ("");
}
    }
});
</script>
</head>
<body>
<table id="TitleGridView" cellpadding="0" cellspacing="1" border="1" width="600">
  <tr>
      <td><input id="TitleGridView_ctl02_ccc" type="checkbox" name="TitleGridView$ctl02$ccc" /></td>
      <td><a href="../../../ArticleManage/ReadNews.aspx?numb=4418&tableName=dept_file_log" target="_blank">通知aaa </a></td>
      <td>2009-7-3 </td>
  </tr>
  <tr>
      <td><input id="TitleGridView_ctl03_ccc" type="checkbox" name="TitleGridView$ctl03$ccc" /></td>
      <td><a href="../../../ArticleManage/ReadNews.aspx?numb=4419&tableName=dept_file_log" target="_blank">通知bbb </a></td>
      <td>2009-7-4 </td>
  </tr>
  <tr>
      <td><input id="TitleGridView_ctl04_ccc" type="checkbox" name="TitleGridView$ctl04$ccc" /></td>
      <td><a href="../../../ArticleManage/ReadNews.aspx?numb=4420&tableName=dept_file_log" target="_blank">通知ccc </a></td>
      <td>2009-7-5 </td>
  </tr>
</table>
<br/>
<li>这里输出HTML：</li>
<div id="textbox" style="height:100px; border:#000000 1px solid;">
</div>
<br/>
<li>这里输出文本：</li>
<textarea name="txtRefQuote" disabled="disabled" id="txtRefQuote" style="height:100px;width:98%;"></textarea>
</body>
</html>

问题几本解决，但唯一揪心的是当页面一刷新，再选择checkbox,textbox里的值就重新拼接， var arrData[] 全局变量如何在保持刷新后内容还在？请高手再指点一下!!!
<script type="text/javascript">        $(document).ready(function() {            var arrData = [];                $("#TitleGridView tr:gt(0)").each(function() {
                //获取每个对象：
                var _this = $(this);
                var o_input = _this.find("input");                var strTableName = getParameter("tableName", _this.find("a").attr("href"));
                var pTableName = strTableName.split("=")[1];                var pField
                if (pTableName == "dept_tongzhi_log") {
                    pField = "jour_name"
                } else {
                    pField = "title";
                }                var strNumb = getParameter("numb", _this.find("a").attr("href"));
                var pNumb = strNumb.split("=")[1];
                //生成单个json数据:
                var data = {};
                data.refTable = pTableName;
                data.refField = pField;
                data.refNumb = pNumb
                data.refDate = _this.find("td:eq(2)").text();                o_input.click(function() {                    var index = $.inArray(data, arrData);    //这句返回该对象在数组中的位置
                    if ($(this).attr("checked")) {
                        if (index < 0) {    //如果数组中不存在这个对象
                            arrData.push(data);    //添加这个对象
                        }
                    } else {
                        if (index >= 0) {    //如果数组中存在这个对象
                            arrData.splice(index, 1)            //删除这个对象
                        }
                    }
                    $("#txtRefQuote").val(arrData2string());
                });            });
            function arrData2string() {
                var arrString = [];
                $.each(arrData, function(i, n) {
                    arrString.push('{"refTable":"' + arrData[i].refTable + '","refField":"' + arrData[i].refField + '","refNumb":"' + arrData[i].refNumb + '","refDate":"' + arrData[i].refDate + '"}' + "\r\n");
                });                if (arrString.length > 0) {
                    return ("[\r\n" + arrString.join(",") + "]");
                } else {
                    return ("");
                }
            }            //javascript获取指定参数及其对应的值
            function getParameter(paraStr, url) {
                var result = "";
                //获取URL中全部参数列表数据
                var str = "&" + url.split("?")[1];
                var paraName = paraStr + "=";
                //判断要获取的参数是否存在
                if (str.indexOf("&" + paraName) != -1) {
                    //如果要获取的参数到结尾是否还包含“&”
                    if (str.substring(str.indexOf(paraName), str.length).indexOf("&") != -1) {
                        //得到要获取的参数到结尾的字符串
                        var TmpStr = str.substring(str.indexOf(paraName), str.length);
                        //截取从参数开始到最近的“&”出现位置间的字符
                        result = TmpStr.substr(TmpStr.indexOf(paraName), TmpStr.indexOf("&") - TmpStr.indexOf(paraName));
                    }
                    else {
                        result = str.substring(str.indexOf(paraName), str.length);
                    }
                }
                else {
                    result = "无此参数";
                }
                return (result.replace("&", ""));
            }
        });
    </script>

up,希望pillar0514能再修改一下，支持刷新后还能保存全局变量，再次感谢!!!

你要保留数据，这做起来就比较麻烦了，两个办法：1，把数据临时存储在cookie中。
   把生成的json转换为字符串保存在cookie中，比较麻烦的是我们不能确认客户端是否能保留cookie。不过大部分浏览器默认都要保存cookie。
   此外另一个麻烦是cookie本身有长度限制(4kb)。2, 在点击事件发生时以AJAX方式同步后台数据，刷新页面的时候获取该数据。
   这是比较保险的做法，你需要服务端支持，得有一个服务页面去保存这个字段。IE的表单本身在刷新页面后能够继续保留数据，我们可以每次在刷新后重新从表单获取一次数据。但是注意：有些浏览器是不支持的，比如chrome,opera,safari等。下面给出了利用IE表单重新获取数据的例子。至于如何用前面提到的2个方法，我已经在代码中给出了提示。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table 2 json</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
        var arrData = [];    //这个就是你将要使用的json对象数组
//这里用setTimeout是为了解决IE6兼容性问题。我这里测试机关了，你用IE6测测吧。
//程序在IE7，firefox下测试通过。
setTimeout(function(){

    //为每条数据绑定事件与变量：
$("#TitleGridView tr").each(function(){
//获取每个对象：
var _this = $(this); //取得这个TR本身的jquery对象
var o_input = _this.find("input");
var o_title = _this.find("a");
var o_printdate = _this.find("td:eq(2)"); //取得这个TR里面的第三个td的jquery对象，2代表索引，从0开始计数

//生成单个json数据:
var data = {};
data.id = o_input.attr("id");
data.title = o_title.text();
data.printdate = o_printdate.text();

o_input.click(function(){
var index = $.inArray(data,arrData);    //这句返回该对象在数组中的位置
if($(this).attr("checked")){
if(index<0){    //如果数组中不存在这个对象
arrData.push(data);    //添加这个对象
}
}else{
if(index>=0){    //如果数组中存在这个对象
arrData.splice(index,1)            //删除这个对象
}
}
$("#textbox").html(arrData2string("<br/>"));
$("#txtRefQuote").val(arrData2string("\r\n"));
});

//这里通过表单初始化数据：
var I = $.inArray(data,arrData);
if(o_input.attr("checked")){
if(I<0){    //如果数组中不存在这个对象
arrData.push(data);    //添加这个对象
}
}else{
if(I>=0){    //如果数组中存在这个对象
arrData.splice(index,1)            //删除这个对象
}
} }); $("#textbox").html(arrData2string("<br/>"));
$("#txtRefQuote").val(arrData2string("\r\n"));

},10);
    //下面的函数把arrData转换为字符串
//你可以把它生成的数据提交到服务端，或者保存进cookie
function arrData2string(str){
        var arrString = [];
        $.each(arrData,function(i,n){
        // arrString.push('{"id":"'+arrData[i].id+'","title":"'+arrData[i].title+'","printdate":"'+arrData[i].printdate+'"}'); //这句就是用来生成单个数据对象的。
// 我不太清楚你想要的换行究竟是什么样，如果只是为了在HTML上显示，那就这样：
arrString.push('{"id":"'+arrData[i].id+'","title":"'+arrData[i].title+'","printdate":"'+arrData[i].printdate+'"}'+str); //我把用于换行的字符 str 加在了末尾
        });
if(arrString.length>0){
return ("["+str+arrString.join(",")+"]");
}else{
return ("");
}
}

//用上面的函数保存你的数据非常简单：
// jsonstr = arrData2string(); //生成字符串，把这个数据提交给服务端保存。注意！不要给参数。这样是为了下一步方便调用：
// arrData = eval(jsonstr); //把字符串转换为对象。json就是这点方便！});
</script>
</head>
<body>
<table id="TitleGridView" cellpadding="0" cellspacing="1" border="1" width="600">
  <tr>
      <td><input id="TitleGridView_ctl02_ccc" type="checkbox" name="TitleGridView$ctl02$ccc" /></td>
      <td><a href="../../../ArticleManage/ReadNews.aspx?numb=4418&tableName=dept_file_log" target="_blank">通知aaa </a></td>
      <td>2009-7-3 </td>
  </tr>
  <tr>
      <td><input id="TitleGridView_ctl03_ccc" type="checkbox" name="TitleGridView$ctl03$ccc" /></td>
      <td><a href="../../../ArticleManage/ReadNews.aspx?numb=4419&tableName=dept_file_log" target="_blank">通知bbb </a></td>
      <td>2009-7-4 </td>
  </tr>
  <tr>
      <td><input id="TitleGridView_ctl04_ccc" type="checkbox" name="TitleGridView$ctl04$ccc" /></td>
      <td><a href="../../../ArticleManage/ReadNews.aspx?numb=4420&tableName=dept_file_log" target="_blank">通知ccc </a></td>
      <td>2009-7-5 </td>
  </tr>
</table>
<br/>
<li>这里输出HTML：</li>
<div id="textbox" style="height:100px; border:#000000 1px solid;">
</div>
<br/>
<li>这里输出文本：</li>
<textarea name="txtRefQuote" disabled="disabled" id="txtRefQuote" style="height:100px;width:98%;"></textarea>
</body>
</html>

有个地方要改一下：arrData2string函数改为： function arrData2string(str){
str = str||"";//没参数就设置为空
        var arrString = [];
        $.each(arrData,function(i,n){
arrString.push('{"id":"'+arrData[i].id+'","title":"'+arrData[i].title+'","printdate":"'+arrData[i].printdate+'"}'+str); //我把用于换行的字符 str 加在了末尾
        });
if(arrString.length>0){
return ("["+str+arrString.join(",")+"]");
}else{
return ("");
}
}

to:pillar0514:感谢,不过用了这次修改的代码试了一下,点击一个查询按钮刷新页面，文本框的值就变成了空?

这种情况和普通的IE F5刷新不同。
IE会认为这是一个新的页面，原先的表单数据不予保存。
用我说的第二种方法把，麻烦些，但是保险。
利用AJAX技术将数据保存在服务端吧。
然后在你认为需要客户看到这些数据的时候初始化数据。

pillar0514 能否用cookies再修改一下,javascript不熟，再次感谢!!!!!!

给分吧。基本上我都给你全写出来了………………
注意：IE7默认安全限制下，cookie在窗口关闭后立刻清空。
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table 2 json</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){

//下面是个cookie工具类，来源于O'REILLY出版的JavaScript权威指南第五版
/************************** cookie 工具类开始 ***********************************///cookie工具类：
/**
* Javascript权威指南 Page 460:
*
* This is the Cookie () construstor function.
*
* This constructor looks for a cookie with the specified name for the
* current document. If one exists, it parse its value into a set of
* name/value pairs and stores thos values as properties of the newly created
* object.
*
* To store new data in the cookie, simply set properties of the Cookie
* object. Avoid properties named "store" and "remove", since these are
* reserved as method names.
*
* To save cookie data in the web browser's local store, call store().
* To remove cookie data from the browser's store, call remove().
*
* The static method Cookie.enabled() returns true if cookies are
* enabled and returns false otherwise.
*/
function Cookie(name){
this.$name  = name;
var allcookies = document.cookie;
if(allcookies == "")return;
var cookies = allcookies.split(";");
var cookie = null;
for(var i = 0; i < cookies.length; i++){
// Does this cookie string begin with the name we want?
if (cookies[i].substring(0, name.length+1) == (name + "=")){
cookie = cookies[i];
break;
}
}
if (cookie == null) return;
var cookieval = cookie.substring(name.length+1);
var a = cookieval.split("&");
for(var i=0; i < a.length; i++){
a[i] = a[i].split(":");
}
for(var i=0; i < a.length; i++){
this[a[i][0]] = decodeURIComponent(a[i][1]);
}
}/**
* This function is the store() method of the Cookie object.
*
* Arguments:
*
* daysToLive: the lifetime of the cookie, in days. If you set this
*   to zero, the cookie will be deleted. If you set it to null, or
*   omit this argument, the cookie will be a session cookie and will
*   not be retained when the browser exits. This argument is used to
*   set the max-age attribute of the cookie.
* path: the value of the path attribute of the cookie
* domain: the value of the domain attribute of the cookie
* secure: if true, the secure attribute of the cookie will be set
*/
Cookie.prototype.store = function(daysToLive, path, domain, secure){
var cookieval = "";
for(var prop in this){
if ((prop.charAt(0) == "$") || ((typeof this[prop]) == "function"))
continue;
if (cookieval != "") cookieval += "&";
cookieval += prop + ":" + encodeURIComponent(this[prop]);
}
var cookie  = this.$name + "=" + cookieval;
if (daysToLive || daysToLive == 0){
cookie += "; max-age=" + (daysToLive*24*60*60);
}
if (path) cookie += "; path=" + path;
if (domain) cookie += "; domain=" + domain;
if (secure) cookie += "; secure";

document.cookie = cookie;
};

/**
* This function is the remove() method of the Cookie object; it deletes the
* properties of the object and removes the cookie from the browser's
* local store.
*
* The arguments to this function are all optional, but to remove a cookie
* you must pass the same value you passed to store().
*/
Cookie.prototype.remove = function(path,domain, secure){
for(var prop in this){
if (prop.charAt(0) != "$" && typeof this[prop] != "function")
delete this[prop];
}
this.store(0,path,domain,secure);
};

/**
* This static method attempts to determine whether cookies are enabled.
* It returns true if they appear to be enabled and false otherwise.
* A return value of true does not guarantee that cookies actually persist .
* Nonpersistent session cookies may still work even if this method
* return false.
*/
Cookie.enabled = function(){
if (navigator.cookieEnabled != undefined) return navigator.cookieEnabled;
if (Cookie.enabled.cache != undefined) return Cookie.enabled.cache;
document.cookie = "testcookie=test; max-age=10000";
var cookies = document.cookie;
if (cookies.indexOf("testcookie=test") == -1){
return Cookie.enable.cache = false;
}
else{
document.cookie = "testcookie=test; max-age=0";
return Cookie.enable.cache = true;
}
};/************************** cookie 工具类结束 ***********************************/    var arrData = [];    //这个就是你将要使用的json对象数组 var cookieData = new Cookie("Data"); //创建一个cookie对象
var strData = cookieData.Data||""; //获取其中data属性值，如值为空则取空字符串
if(!!strData){ //如果获取到的值不为空
arrData = eval(strData); //执行并获取数据
}    //这里用setTimeout是为了解决IE6兼容性问题。我这里测试机关了，你用IE6测测吧。
    //程序在IE7，firefox下测试通过。
    setTimeout(function(){

    //为每条数据绑定事件与变量：
        $("#TitleGridView tr").each(function(){
            //获取每个对象：
            var _this = $(this);                        //取得这个TR本身的jquery对象
            var o_input = _this.find("input");
            var o_title = _this.find("a");
            var o_printdate = _this.find("td:eq(2)");    //取得这个TR里面的第三个td的jquery对象，2代表索引，从0开始计数

            //生成单个json数据:
            var data = {};
            data.id = o_input.attr("id");
            data.title = o_title.text();
            data.printdate = o_printdate.text();

            o_input.click(function(){
var index = DataInArray(data,arrData);
                if($(this).attr("checked")){
                    if(index<0){    //如果数组中不存在这个对象
                        arrData.push(data);    //添加这个对象
                    }
                }else{
                    if(index>=0){    //如果数组中存在这个对象
                        arrData.splice(index,1)            //删除这个对象
                    }
                }
                $("#textbox").html(arrData2string("<br/>"));
                $("#txtRefQuote").val(arrData2string("\r\n"));

//保存cookie
cookieData.Data = arrData2string();
cookieData.store(7); //cookie保留7天。
            });

            //这里通过数据初始化表单：
var I = DataInArray(data,arrData);
            if(o_input.attr("checked")){
                if(I<0){    //如果数组中不存在这个对象
                    o_input.removeAttr("checked");    //添加这个对象
                }
            }else{
                if(I>=0){    //如果数组中存在这个对象
                    o_input.attr("checked","checked"); //删除这个对象
                }
            }        });        $("#textbox").html(arrData2string("<br/>"));
        $("#txtRefQuote").val(arrData2string("\r\n"));

    },10);

//这个函数比较2个对象是否相等，用字符串方式比较。
function DataInArray(d,arr){
for(var i = 0,j = arr.length;i<j;i++){
if( O2S(d)==O2S(arr[i]) ) break;
}
return (i>=j ? -1 : i);
}

//对象转为字符串：
function O2S(data){
var arrD = [];
for(var k in data){
arrD.push('"'+k+'":"'+data[k]+'"');
}
return "{"+arrD.join(",")+"}";
}    //下面的函数把arrData转换为字符串
    //你可以把它生成的数据提交到服务端，或者保存进cookie
    function arrData2string(str){
        str = str||"";//没参数就设置为空
        var arrString = [];
        $.each(arrData,function(i,n){
            arrString.push(O2S(arrData[i])+str);    //我把用于换行的字符 str 加在了末尾
        });
        if(arrString.length>0){
            return ("["+str+arrString.join(",")+"]");
        }else{
            return ("");
        }
    }
    //用上面的函数保存你的数据非常简单：
    //    jsonstr = arrData2string();        //生成字符串，把这个数据提交给服务端保存。注意！不要给参数。这样是为了下一步方便调用：
    //    arrData = eval(jsonstr);        //把字符串转换为对象。json就是这点方便！
});
</script>
</head>
<body>
<table id="TitleGridView" cellpadding="0" cellspacing="1" border="1" width="600">
  <tr>
      <td><input id="TitleGridView_ctl02_ccc" type="checkbox" name="TitleGridView$ctl02$ccc" /></td>
      <td><a href="../../../ArticleManage/ReadNews.aspx?numb=4418&tableName=dept_file_log" target="_blank">通知aaa </a></td>
      <td>2009-7-3 </td>
  </tr>
  <tr>
      <td><input id="TitleGridView_ctl03_ccc" type="checkbox" name="TitleGridView$ctl03$ccc" /></td>
      <td><a href="../../../ArticleManage/ReadNews.aspx?numb=4419&tableName=dept_file_log" target="_blank">通知bbb </a></td>
      <td>2009-7-4 </td>
  </tr>
  <tr>
      <td><input id="TitleGridView_ctl04_ccc" type="checkbox" name="TitleGridView$ctl04$ccc" /></td>
      <td><a href="../../../ArticleManage/ReadNews.aspx?numb=4420&tableName=dept_file_log" target="_blank">通知ccc </a></td>
      <td>2009-7-5 </td>
  </tr>
</table>
<br/>
<li>这里输出HTML：</li>
<div id="textbox" style="height:100px; border:#000000 1px solid;">
</div>
<br/>
<li>这里输出文本：</li>
<textarea name="txtRefQuote" disabled="disabled" id="txtRefQuote" style="height:100px;width:98%;"></textarea>
</body>
</html>

晕,cookies是加上了,我的应用场景是需求是这样的a.html是通过b.html页面打开
a.html和b.html各有一个textbox,txta和txtb
点击b.html里的按钮将txtfb的值传入a.html的txta，并关闭 b.html
b.html 相当现在讨论的页面,
现在的问题每次单击打开b.html,textb里面的值还在！! 应该空的才对
用cookies的目的是(b.html里有button刷新页面，arrDate就清空了)

简单的cookies.remove()试过,总达不到效果

调试易

100分求一简单的jquery应用!!!

解决方案 »