87,904
社区成员
发帖
与我相关
我的任务
分享为何JS动态输出表格没有CSS效果
<!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" />
<link href="css.css" rel="stylesheet" type="text/css" />
<title>量产数据计算器</title>
</head>
<!--JS计算码数-->
<script language="javascript">
function lc() {
//代入值
bianhao=document.getElementById("inputbainhao").value;
basem = Number(document.getElementById("basem").value);
minm = Number(document.getElementById("minm").value);
maxm= Number(document.getElementById("maxm").value);
basex= Number(document.getElementById("basex").value);
basey= Number(document.getElementById("basey").value);
basez= Number(document.getElementById("basez").value);
mcx= Number(document.getElementById("mcx").value);
mcy= Number(document.getElementById("mcy").value);
mcz= Number(document.getElementById("mcz").value);
//先得最小码
zxx=basex-(basem-minm)*mcx;
alert('x'+zxx);
zxy=basey-(basem-minm)*mcy;
alert('y'+zxy);
zxz=basez-(basem-minm)*mcz;
alert('z'+zxz);
alert(bianhao);
//计算全部
lc=true;
j=0 ; //码差增加倍数
for (var i=minm; i<=maxm; i++) {
if(i==basem){ //等于本码CSS为红色,粗体
document.getElementById("lc").innerHTML +='<tr><td class="td2"><input type="text" id="m'+i+'" value="'+i+'码" class="td00"></td><td class="td2"><input type="text" id="x'+i+'" value="'+Number(zxx+mcx*j)+'" class="td00"></td><td class="td2"><input type="text" id="y'+i+'" value="'+Number(zxy+mcy*j)+'" class="td00"></td><td class="td2"><input type="text" id="z'+i+'" value="'+Number(zxz+mcz*j)+'" class="td00"></td><td class="td2"><input type="text" id="bx'+i+'" value="'+i+'码" class="td00"></td><td class="td2"><input type="text" id="by'+i+'" value="'+i+'码" class="td00"></td><td class="td2"><input type="text" id="bz'+i+'" value="'+i+'码" class="td00"></td><td class="td2"><input type="text" id="" value="这是本码" class="td00"></td></tr>';
}else{
document.getElementById("lc").innerHTML += '<tr><td class="td2"><input type="text" id="" class="td3"></td><td class="td2"><input type="text" id="" class="td3"></td><td class="td2"><input type="text" id="" class="td3"></td><td class="td2"><input type="text" id="" class="td3"></td><td class="td2"><input type="text" id="" class="td3"></td><td class="td2"><input type="text" id="" class="td3"></td><td class="td2"><input type="text" id="" class="td3"></td><td class="td2"><input type="text" id="" class="td3"></td></tr>'
document.getElementById("lc").innerHTML +='<tr><td class="td2"><input type="text" id="m'+i+'" value="'+i+'码" class="td3"></td><td class="td2"><input type="text" id="x'+i+'" value="'+Number(zxx+mcx*j)+'" class="td3"></td><td class="td2"><input type="text" id="y'+i+'" value="'+Number(zxy+mcy*j)+'" class="td3"></td><td class="td2"><input type="text" id="z'+i+'" value="'+Number(zxz+mcz*j)+'" class="td3"></td><td class="td2"><input type="text" id="bx'+i+'" value="'+i+'码" class="td3"></td><td class="td2"><input type="text" id="by'+i+'" value="'+i+'码" class="td3"></td><td class="td2"><input type="text" id="bz'+i+'" value="'+i+'码" class="td3"></td><td class="td2"><input type="text" id="" value="备注" class="td3"></td></tr>';
alert(document.getElementById("m"+i).value);//测试
alert(document.getElementById("x"+i).value);//测试
document.getElementById("bh").value = String(bianhao);
j+=1;
}
} //for结束
alert(bianhao);//测试
alert(lc);//测试
} //lc()结束
function bz() { //计算比值
if(lc==true){ //已经计算了量产值并做有需要的更改后才能计算
alert("可以计算");
//此处计算比值
lc=false;
}else{
alert("不可以计算");
}
}
</script> <!--JS计算结束-->
<body>
<!--输入值表单-->
<div id="box">
<div id="fm">
<form>
<fieldset>
<legend><span>量产编号：<input type="text" id="inputbainhao" class="tt"/>
基本码号: <input type="text" id="basem" class="ttt"/>
从 <input type="text" id="minm" class="ttt"/>
到 <input type="text" id="maxm" class="ttt"/>码</span>
</legend>
<span>本码X: <input type="text" id="basex" name="basem" class="textstyle"/></span>
<span>本码Y: <input type="text" id="basey" class="textstyle"/></span>
<span>本码Z: <input type="text" id="basez" class="textstyle"/></span><br/>
<span>码差X: <input type="text" id="mcx" class="textstyle"/></span>
<span>码差Y: <input type="text" id="mcy" class="textstyle"/></span>
<span>码差Z: <input type="text" id="mcz" class="textstyle"/></span>
<input type="button" value="计算数据" onclick="lc()"/><input type="button" value="计算比值" onclick="bz()"/>
</fieldset>
</form>
</div><br/><br/><br/> <!--输入值表单结束-->
<div id="lc"> <!--显示量产-->
<table id="tableid" > <!--表格开始-->
<tr>
<td colspan="8" class="td1"><span class="td0">编号：</span><input type="text" id="bh" class="td0"></td>
</tr>
<tr>
<td width="60" rowspan="2" class="td1">码号</td>
<td colspan="3"class="td1">尺寸</td>
<td colspan="3" class="td1">比值</td>
<td width="150" rowspan="2" class="td1">备注</td>
</tr>
<tr>
<td width="80" class="td1">X</td>
<td width="80" class="td1">Y</td>
<td width="80" class="td1">Z</td>
<td width="80" class="td1">X</td>
<td width="80" class="td1">Y</td>
<td width="80" class="td1">Z</td>
</tr>
<!--下面表格循环输出-->
<tr><td class="td2"><input type="text" id="" class="td3"></td><td class="td2"><input type="text" id="" class="td3"></td><td class="td2"><input type="text" id="" class="td3"></td><td class="td2"><input type="text" id="" class="td3"></td><td class="td2"><input type="text" id="" class="td3"></td><td class="td2"><input type="text" id="" class="td3"></td><td class="td2"><input type="text" id="" class="td3"></td><td class="td2"><input type="text" id="" class="td3"></td></tr>
</table> <!--表格结束-->
</div> <!--显示量产结束-->
</div>
</body>
</html>
下面CSS
body{font-family:"微软雅黑","Times New Roman",Georgia,Serif;}
.tt {width:60px; height:18px; border:1px solid red; text-align:left; font-weight:bold;font-size:14px;margin:5px 3px 5px 3px;}
.ttt {width:30px; height:18px; border:1px solid red; text-align:left; font-weight:bold;margin:5px 3px 5px 3px;}
.textstyle {width:85px; height:18px; border:1px solid red; text-align:left;margin:5px 3px 5px 3px;}
#box{width:900;overflow:hidden;}
#box span{margin:0px 10px 0px 10px;}
#lc{overflow:hidden;width:900;}
#fm{overflow:hidden;width:900;height:100px}
/**表格*/
#tableid{width:780; cellspacing="0px"; border-collapse:collapse;text-align:center; }
td{ padding:0; margin:0;}
.td0{text-align:center; font-weight:bold;font-size:22px;border:0px;width:65px;}
.td1{text-align:center; font-weight:bold;font-size:18px;border:1px solid #000;}
.td2{text-align:center; font-size:16px;border:1px solid #000;}
.td3{text-align:center; border:0px;width:80px;font-size:16px}
.td00{text-align:center; border:0px;width:80px;font-weight:bold;color:red;font-size:16px}
.td4{text-align:center; border:0px;width:150px;font-size:16px}
...全文
请发表友善的回复…
发表回复
lengye0913 2013-04-06
- 打赏
- 举报
