<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
tr>td{
400px;
}
.spelSpan{
visibility: hidden;
}
</style>
</head>
<body>
<ul id="boxUl"></ul>
<div>展示：<span id="showImessage"></span></div>
<button onclick="suanf(0)">加</button><button onclick="suanf(1)">减</button>
<table id="box" border="1">
<thead>
<tr>
<th></th>
<th>序号</th>
<th>姓名：</th>
<th>年龄：</th>
<th>爱好：</th>
<th>运动：</th>
</tr>
</thead>
<tbody id="bodybox"></tbody>
<button id="btnId">提交</button>
</table>
<script src="./jquery-1.11.1.min.js" ></script>
<script>
//<!-- 动态添加数据-->
var data=["1232","123we","aeds"];
var str="";
for(var i=0;i<data.length;i++){
str +="<li"+">"+data[i]+"</li"+">"
}
$("#boxUl").append(str)
//点击加减1
var o=0;
function suanf (jia){
if(jia == "0"){
o ++;
$("#showImessage").html(o)
}else if(jia == "1"){
o --;
$("#showImessage").html(o)
}
}
//动态加载表格数据
var dataArry=[
{"id":"12312",'name':"张三",'age':"15",'like':"羽毛球",'play':"运动"},
{"id":"3434343",'name':"小时",'age':"4",'like':"足球",'play':"运动"},
{"id":"5656565",'name':"利达",'age':"7",'like':"画画",'play':"运动"},
{"id":"6767676",'name':"吴家",'age':"21",'like':"乒乓球",'play':"运动"}
];
for(var s =0;s<dataArry.length;s ++){
var $trTemp = $("<tr></tr>");
$trTemp.append("<td"+">"+"<inPut type='checkbox'>"+"<span class='spelSpan'>"+(dataArry[s].id) +"</span>"+"</td"+">");
$trTemp.append("<td"+">"+(s+1) +"</td"+">");
$trTemp.append("<td"+">"+(dataArry[s].name) +"</td"+">");
$trTemp.append("<td"+">"+ (dataArry[s].age) +"</td"+">");
$trTemp.append("<td"+">"+ (dataArry[s].like) +"</td"+">");
$trTemp.append("<td"+">"+ (dataArry[s].play) +"</td"+">") ;
$trTemp.appendTo("#bodybox");
}
//拿id
//用一个隐藏的元素，接受id值，然后点击选框的时候 给这个元素一个标记checkSVal
$("#bodybox").on("click",'[type="checkbox"]',function(){
if($(this).is(':checked')){
$(".spelC").addClass("checkSVal")
$(this).siblings().addClass("selectedVal")
}else{
$(this).siblings().removeClass("selectedVal")
}
})
//点击提交按钮时拿到所有带这个标记的值，并用逗号隔开放在数组里面
$("#btnId").click(function(){
var arr=[];
var selectval=$(".selectedVal")
for(var i=0;i<selectval.length;i++){
arr.push(selectval[i].innerHTML)
}
arr.join(',')
console.log(arr)
})
</script>
</body>
</html>