读书人

IE里不能施行这段动态增加表格到id为t

发布时间: 2013-04-09 16:45:09 作者: rapoo

IE里不能执行这段动态增加表格到id为tableid的代码,请老师帮忙解决一下
IE里不能执行这段动态增加表格到id为tableid的代码,请老师帮忙解决一下,增加到ID为LC的DIV里就可以,但这样没有了CSS效果,
IE里不能施行这段动态增加表格到id为tableid的代码,请老师帮忙解决一下IE里不能施行这段动态增加表格到id为tableid的代码,请老师帮忙解决一下

<script language="javascript">
function lc() {
//代入值
dd=Number(document.getElementById("dd").value);//尺寸精确到几位
ddd=Number(document.getElementById("ddd").value);//比值精确到几位
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);//测试
//计算全部
j=0 ;//码差增加倍数
for (var i=minm; i<=maxm; i++) {
if(i==basem){ //等于本码CSS为红色,粗体
document.getElementById("tableid").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).toFixed(dd)+'" class="td00"></td><td class="td2"><input type="text" id="y'+i+'" value="'+Number(zxy+mcy*j).toFixed(dd)+'" class="td00"></td><td class="td2"><input type="text" id="z'+i+'" value="'+Number(zxz+mcz*j).toFixed(dd)+'" class="td00"></td><td class="td2"><input type="text" id="bx'+i+'" value="" class="td00"></td><td class="td2"><input type="text" id="by'+i+'" value="" class="td00"></td><td class="td2"><input type="text" id="bz'+i+'" value="" class="td00"></td><td class="td2"><input type="text" id="" value="这是本码" class="td00"></td></tr>';
j+=1;
}else{
document.getElementById("tableid").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).toFixed(dd)+'" class="td3"></td><td class="td2"><input type="text" id="y'+i+'" value="'+Number(zxy+mcy*j).toFixed(dd)+'" class="td3"></td><td class="td2"><input type="text" id="z'+i+'" value="'+Number(zxz+mcz*j).toFixed(dd)+'" class="td3"></td><td class="td2"><input type="text" id="bx'+i+'" value="" class="td3"></td><td class="td2"><input type="text" id="by'+i+'" value="" class="td3"></td><td class="td2"><input type="text" id="bz'+i+'" value="" class="td3"></td><td class="td2"><input type="text" id="" value="备注" class="td4"></td></tr>';
//alert(document.getElementById("m"+i).value);//测试
//alert(document.getElementById("x"+i).value);//测试
j+=1;
}
} //for结束
document.getElementById("bh").value = String(bianhao);


}//lc()结束
</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>
尺寸精确度:<input type="text" id="dd" value="4" class="ttt"/>
比值精确度:<input type="text" id="ddd" value="4" class="ttt"/>
<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()"/>
<input type="button" value="清空数据" onclick="history.go(0)">
</fieldset>
</form>
</div><br/><br/><br/><!--输入值表单结束-->

<div id="lc"><!--显示量产-->
<table id="tableid" border="1"> <!--表格开始-->
<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>
<!--表格循环输出-->
</table><!--表格结束-->
</div><!--显示量产结束-->
</div>


[解决办法]
仔细跟踪后发现是这个问题,IE中document.getElementById("tableid").innerHTML自带了<tbody>....</tbody>,然后试图在</tbody>之后加入<tr>肯定报错。

为此,我建议你使用jquery框架来处理这部分内容,
另外,你变量名起得有问题,lc又是个domid,又是个函数,IE下面会出错,找不到lc这个函数,还有函数里所有的变量都要加var ,要不很容易和同id的dom对象混淆。


<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script language="javascript">
function lcFn() {


//代入值
var dd=Number(document.getElementById("dd").value); //尺寸精确到几位
var ddd=Number(document.getElementById("ddd").value); //比值精确到几位
var bianhao=document.getElementById("inputbainhao").value;
var basem = Number(document.getElementById("basem").value);
var minm = Number(document.getElementById("minm").value);
var maxm= Number(document.getElementById("maxm").value);
var basex= Number(document.getElementById("basex").value);
var basey= Number(document.getElementById("basey").value);
var basez= Number(document.getElementById("basez").value);
var mcx= Number(document.getElementById("mcx").value);
var mcy= Number(document.getElementById("mcy").value);
var mcz= Number(document.getElementById("mcz").value);
//先得最小码
var zxx=basex-(basem-minm)*mcx;
//alert('x'+zxx);//测试
var zxy=basey-(basem-minm)*mcy;
//alert('y'+zxy);//测试
var zxz=basez-(basem-minm)*mcz;
//alert('z'+zxz);//测试
//alert(bianhao);//测试
//计算全部
var j=0 ; //码差增加倍数
for (var i=minm; i<=maxm; i++) {
var old= $("#tableid").html();
if(i==basem){ //等于本码CSS为红色,粗体
$("#tableid").html(old+'<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).toFixed(dd)+'" class="td00"></td><td class="td2"><input type="text" id="y'+i+'" value="'+Number(zxy+mcy*j).toFixed(dd)+'" class="td00"></td><td class="td2"><input type="text" id="z'+i+'" value="'+Number(zxz+mcz*j).toFixed(dd)+'" class="td00"></td><td class="td2"><input type="text" id="bx'+i+'" value="" class="td00"></td><td class="td2"><input type="text" id="by'+i+'" value="" class="td00"></td><td class="td2"><input type="text" id="bz'+i+'" value="" class="td00"></td><td class="td2"><input type="text" id="" value="这是本码" class="td00"></td></tr>');
j+=1;
}else{
$("#tableid").html(old+'<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).toFixed(dd)+'" class="td3"></td><td class="td2"><input type="text" id="y'+i+'" value="'+Number(zxy+mcy*j).toFixed(dd)+'" class="td3"></td><td class="td2"><input type="text" id="z'+i+'" value="'+Number(zxz+mcz*j).toFixed(dd)+'" class="td3"></td><td class="td2"><input type="text" id="bx'+i+'" value="" class="td3"></td><td class="td2"><input type="text" id="by'+i+'" value="" class="td3"></td><td class="td2"><input type="text" id="bz'+i+'" value="" class="td3"></td><td class="td2"><input type="text" id="" value="备注" class="td4"></td></tr>');


//alert(document.getElementById("m"+i).value);//测试
//alert(document.getElementById("x"+i).value);//测试
j+=1;
}
} //for结束
document.getElementById("bh").value = String(bianhao);
} //lc()结束
</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>
尺寸精确度:<input type="text" id="dd" value="4" class="ttt"/>
比值精确度:<input type="text" id="ddd" value="4" class="ttt"/>
<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="lcFn()"/>
<input type="button" value="计算比值" onclick="bz()"/>
<input type="button" value="清空数据" onclick="history.go(0)">
</fieldset>
</form>
</div><br/><br/><br/> <!--输入值表单结束-->

<div id="lc"> <!--显示量产-->
<table id="tableid" border="1"> <!--表格开始-->
<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>
<!--表格循环输出-->
</table> <!--表格结束-->
</div> <!--显示量产结束-->
</div>


读书人网 >JavaScript

热点推荐