<!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=gb2312" />
<TITLE> dynamic create table </TITLE>
<style type="text/css">
table
{
border-collapse: collapse;
}
td
{
border: 1px solid #ccc;
}
</style><script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<SCRIPT type="text/javascript" >
function createTable(){
$("table#shopcolortable").remove();
var table = $("<table id=\"shopcolortable\" border=\"1\" bordercolor=\"#cccccc\" cellspacing=\"0\" style=\"visibility: visible;\">");
table.appendTo(($("#shopcolordiv")));
var th=$(" <th width=\"56\" >颜色分类</th>"
+"<th width=\"28\" >尺码</th>"
+"<th width=\"168\">价格</th>"
+"<th width=\"168\" >数量</th>")
th.appendTo(table);
var tr=$("<tr></tr>");
var td= null;
var sizebol=0;//判断第一组size是否应该在colspan
var size_one=0;//判断第一个size跟colspan在一起
var colorval=document.getElementsByName('colinput');//color
var sizeval=document.getElementsByName('sizeinput');//color
var trlength=null;
var tdNum=1;
if($("input[name=sizeinput]:checked").length>0 ){
for(var j=0;j<sizeval.length;j++){
if(sizeval[j].checked==true){
tdNum=parseInt(tdNum+1)
}
}
}
for(var i=0;i<colorval.length;i++){
if($("input[name=colinput]:checked").length>0 ){ //颜色多选没有为空
if(colorval[i].checked==true){
tr.appendTo(table);
td=$("<td rowspan="+tdNum+">"+colorval[i].value+"</td>");
td.appendTo(tr);
for(var j=0;j<sizeval.length;j++){ //size
if($("input[name=sizeinput]:checked").length>0 ){ //是否 size选择
if($("input[name=colinput]:checked").length>0)//颜色没有选择不给选择尺寸
{
if(sizeval[j].checked==true){//size被选中
if(sizebol==0)
{
td=$("<td >"+sizeval[j].value+"</td>"
+" <td ><input type=\"text\" value=\"0\" /></td>"
+" <td ><input type=\"text\" value=\"0.00\" maxlength=\"9\" /></td>");
sizebol=1;
td.appendTo(tr);
}//end sizebol if 第一个colspan里有颜色
if(sizebol==1)//下面添加没有颜色tr
{
if(size_one==1)//证明已经跳过了第一个size checked
{
if(sizeval[j].checked==true){
td=$("<tr><td >"+sizeval[j].value+"</td>"
+" <td ><input type=\"text\" value=\"0\" /></td>"
+" <td ><input type=\"text\" value=\"0.00\" maxlength=\"9\" /></td></tr>");
td.appendTo(table);
}
}//第一组size在colspan
else{
//直接跳过
size_one=1;
}//end size_one
}//end if下面添加没有颜色tr
}
else
{
}//end if size被选中
}
else
{
trlength=$("tr").length;
if(length<2)
{
$("#shopcolortable").remove();
}
for(var a=1;a<tdNum;a++){
$("td:contains("+sizeval[j].value+")").parent().find("td").remove();
}
}//end if颜色没有选择不给选择尺寸
}
else
{
//第一行的没有size选择后也要删除table
$("#shopcolortable").remove();
}//end if是否 size选择
}// end size for
}//end color checked if
else{
$("td:contains("+colorval[i].value+")").remove();
}//end color checked if
}
else
{
$("#shopcolortable").remove();
}//end if颜色多选没有为空
sizebol=0;
size_one=0;
} //end color for
$("#shopcolordiv").append("</table>");
}
function deltr(obj)
{
var length=$("tr").length;
if(length<=2)
{
alert("至少保留一行");}
else
{
$(arguments[0]).parent().parent().remove();}
}
</SCRIPT>
</HEAD>
<BODY>
<div id="colordiv">
<input type="checkbox" name="colinput" value="白色" onclick="createTable()" /> 白色
<input type="checkbox" name="colinput" value="红色" onclick="createTable()" /> 红色色
<input type="checkbox" name="colinput" value="黑色" onclick="createTable()" /> 黑色
</div>
<div id=sizediv>
<input type="checkbox" name="sizeinput" value="L" onclick="createTable()">L
<input type="checkbox" name="sizeinput" value="X" onclick="createTable()">X
<input type="checkbox" name="sizeinput" value="XL" onclick="createTable()">XL
</div>
<div id="shopcolordiv">
</div> </BODY>
</HTML>
选择多个颜色和多个尺寸时候就会出错，找不到问题在哪里？求大侠们帮忙。