为什么这段代码不起作用?

时间:2017-07-21 10:48:44

标签: javascript html render

这是我的代码:

            document.getElementById("charthelp").innerHTML+="<table>";
            for(var i=0; i<data.ertekek.length; i++)
            {
                szinek = [Math.floor((Math.random() * 200) + 1), Math.floor((Math.random() * 200) + 1), Math.floor((Math.random() * 200) + 1)];
                charts[i]=new TimeSeries();
                smoothie.addTimeSeries(charts[i], { strokeStyle: 'rgb('+szinek[0]+', '+szinek[1]+', '+szinek[2]+')', fillStyle: 'rgba(0, 255, 0, 0.0)', lineWidth: 3 });
                if(i%2==1){ document.getElementById("charthelp").innerHTML+= '<tr><td><input type="checkbox" id="'+i+'", onclick="handleClick(this)"><span style="background-color:rgb('+szinek[0]+', '+szinek[1]+', '+szinek[2]+')">&nbsp  &nbsp &nbsp</span>'+data.ertekek[i].neve+'</input></td>'; }
                else { document.getElementById("charthelp").innerHTML+= '<td><input type="checkbox" id="'+i+'", onclick="handleClick(this)"><span style="background-color:rgb('+szinek[0]+', '+szinek[1]+', '+szinek[2]+')">&nbsp  &nbsp &nbsp</span>'+data.ertekek[i].neve+'</input></td></tr>'; }
                inic=true;
            }
            document.getElementById("charthelp").innerHTML+='</table>';

以下是呈现的HTML代码:

<div id="charthelp"><input type="checkbox" id="0" ,="" onclick="handleClick(this)"><table>
    
</table>
<input type="checkbox" id="1" ,="" onclick="handleClick(this)"><span style="background-color:rgb(109, 12, 20)">&nbsp; &nbsp; &nbsp;</span>Elektronikai csarnok
<input type="checkbox" id="2" ,="" onclick="handleClick(this)"><span style="background-color:rgb(92, 148, 103)">&nbsp; &nbsp; &nbsp;</span>Bemutatóterem
<input type="checkbox" id="3" ,="" onclick="handleClick(this)"><span style="background-color:rgb(121, 81, 16)">&nbsp; &nbsp; &nbsp;</span>Fejlesztés

以下是表格的图片:Picture

正如您所看到的,JS代码不起作用。它应该按顺序执行,但第一行和最后一行先运行。之后迭代运行。我认为它必须是一张桌子,但它也不是一张桌子......

1 个答案:

答案 0 :(得分:3)

我认为问题是,在您尝试将</table>附加到文档HTML后,浏览器会自动添加<table>

尝试使用

var table = document.createElement('table');
var tr = document.createElement('tr');
table.appendChild(tr);
...
document.getElementById("charthelp").appendChild(table);