IE里不能施行这段动态增加表格到id为tableid的代码，请老师帮忙解决一下

2013-04-09

IE里不能执行这段动态增加表格到id为tableid的代码，请老师帮忙解决一下IE里不能执行这段动态增加表格到id

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

IE里不能施行这段动态增加表格到id为tableid的代码，请老师帮忙解决一下