代码如下。js+html。
但是如同上述 黑马黄子所说。需要考虑数据实时性。自己判断何时需要提交数据。
<!DOCTYPE html><html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.main{
width: 99%
height:99%
border: 1px solid #dddddd
position: relative
}
</style>
<script type="text/javascript">
function Choose(){
var mine = this
this.selections =[]
this.init = function(rows,cloumns,where){
var ul = document.createElement("ul")
var siteNum=1
for(var i =0i<cloumnsi++){
for(var j=0j<rowsj++){
var li = document.createElement("li")
li.style.listStyle = "none"
li.style.width = "50px"
li.style.height = "30px"
li.style.border ="1px solid #000"
li.style.color ="#000"
li.style.background ="green"
li.style.fontSize ="30px"
li.style.lineHeight ="30px"
li.style.textAlign ="center"
li.style.cursor ="pointer"
li.style.marginLeft = (j*52 +10) +"px"
if(j>0){
li.style.marginTop = -32 +"px"
}else{
li.style.marginTop = 0 +"px"
}
li.textContent = siteNum++
ul.appendChild(li)
}
}
ul.onclick = function(e){
var target = e.target || e.srcElement
if(target.tagName.toUpperCase() ==='LI'){
if('red'===target.style.color){
target.style.background ="green"
target.style.color= "#000"
for(var i=0i< (mine.selections.length)i++){
if(mine.selections[i] === target.textContent){
mine.selections.splice(i,1)
}
}
}else{
target.style.background = "#ccc"
target.style.color ='red'
mine.selections.push(target.textContent)
}
}
}
var toWhere = where || document.body
toWhere.appendChild(ul)
}
}
window.onload = function(){
var chooser = new Choose()
chooser.init(20,10)
document.getElementById("test").onclick = function(){
console.log(chooser.selections)
}
}
</script>
</head>
<body>
<button id="test">测试</button>
</body>
</html>
<!DOCTYPE HTML><html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
<script>
var row=2,col=11,size=20,gap=5
window.onload=function(){
var wrap=document.createElement("div")
wrap.style.margin="0 auto"
wrap.style.width=(size+gap)*col+"px"
for(var i=0i<rowi++){
var rows=document.createElement("div")
rows.style.float="left"
rows.style.marginBottom=gap+"px"
for(var j=0j<colj++){
var div=document.createElement("img")
div.src="a.png"
div.style.width=size+"px"
div.style.height=size+"px"
div.style.float="left"
div.style.marginLeft=gap+"px"
div.onclick=function(){
!this.abc?this.src="b.png":this.src="a.png"
this.abc=!this.abc
}
rows.appendChild(div)
}
wrap.appendChild(rows)
}
document.body.appendChild(wrap)
}
</script>
</head>
<body>
</body>
</html>
.....光给张图 不知道 红 蓝 灰 的样式， 怎么匹配座位 也看不出来$(座位的selector).click(function(){
var attr_class=$(this).attr('class')
if(attr_class=='灰'){
return false
}
if(attr_class=='红'){
$(this).removeClass('红')
$(this).addClass('蓝')
return
}
if(attr_class=='蓝'){
$(座位的selector).each(function(){
$(this).removeClass('红')
})
$(this).removeClass('蓝')
$(this).addClass('红')
return
}
})
