0

我正在尝试创建一个简单的 html 页面一些动态按钮。这是我到目前为止所做的：

<HTML>
<BODY  bgColor="#d4d4d4"  onload="OnLoad()" >

<script language = "javascript">

function OnQuery()
{
  alert("Query");
}
function OnLoad()
{
  document.write("<INPUT onclick=\"OnQuery()\" type=\"button\" value=\" Search \" name=\"querybtn\" />");
}
</script>
</BODY>
</HTML>

正如您可以从代码中猜到的那样，我对 javascript 非常陌生。正在添加“搜索”按钮，但单击时不会调用 OnQuery。我究竟做错了什么？这是一个简单的原型代码，仅适用于 IE。

4

2 回答 2

4

将 document.writes 更改为使用 document.createElement 来创建 Dom

function OnQuery()
{
    alert("Query");
}

function OnLoad()
{
    var Objs = new Array();
    var xmlInput = "<QueryResult>Some values</QueryResult>";

    var doc = xmldso.XMLDocument;
    doc.loadXML(xmlInput );

    var x = doc.getElementsByTagName("QueryResult");

    for(i=0; i < x.length; ++i)
    {
        Objs[i] = new MyObject(x[i]);
    }


    //Create the table element
    var table = document.createElement("table");
    table.setAttribute("border",1);

       for(i=0; i < Exams.length;++i)
       {
            //Create the row element
            var row = document.createElement("tr");
            //Create the 2 columns
            var col1 = document.createElement("td");
            var col2 = document.createElement("td");

            //Create the checkbox input
            var chkId = "Row" + i;            
            var chkIdInput = document.createElement("input");
            chkIdInput.setAttribute("type","checkbox");
            chkIdInput.id = chkId;

            //Add the checkbox to the column
            col1.appendChild(chkIdInput);

            //Set the text of second column
            col2.textContent = Objs[i].Prop1;

            //Add columns to the row
            row.appendChild(col1);
            row.appendChild(col2);

            //Add the row to the table
            table.appendChild(row);
       }
       //Add the table to the body
       document.body.appendChild(table);

       //Create the search button
       var searchBtn = document.createElement("input");
       //Set the attributes
       searchBtn.setAttribute("onclick","OnQuery()");
       searchBtn.setAttribute("type","button");
       searchBtn.setAttribute("value","Search");
       searchBtn.setAttribute("name","querybtn");
       searchBtn.style.marginLeft = "20px";
       searchBtn.style.marginTop = "20px";
       //Add the button to the body
       document.body.appendChild(searchBtn);
}


function OnUnload()
{
}

在 IE 10 和 9 中的 jsfiddle 中工作没有检查较低版本

JSFiddle

于 2013-08-17T10:57:49.850 回答
2

永远不要使用 document.write() - 这是一个非常丑陋的遗留功能。

HTML 标签（大约从 html 的 v4 开始）应该是小写的。代码还有其他一些混乱的地方——但是有一个单独的 StackOverflow 站点用于代码审查。

这里没有任何特定于 MSIE 的内容 - 我强烈建议您不要使用特定于 MSIE 的代码 - 如果您为 Firefox 或 webkit 编写代码，那么您会发现它在不同目标（包括 MSIE）之间更具可移植性。

再试一次......

<html>
<script>
function OnQuery() {
    alert("Query");
}
function OnLoad() {
    var t=false;
    if (t = document.getElementById("placeholder")) {
        t.innerHTML="<INPUT onclick=\"OnQuery()\" type=\"button\" value=\" Search \" name=\"querybtn\" />";
    }
}
if (window.addEventListener) {
     window.addEventListener('load', OnLoad, false);
} else if (window.attacheEvent) {
     window.attachEvent('onload', OnLoad);
}
</script>
<body  style="background-color: #d4d4d4">
<div id="placeholder"></div>
</body>
</html>

虽然您可以显式使用 DOM createElement 并添加节点内容 - 处理复杂结构时会变得混乱和缓慢 - HTML 片段和 innerHTML 更加灵活和快速。

于 2013-08-17T11:08:29.850 回答