1

我这里有一些代码（对不起，因为我的代码太长但我是“鸡”，所以我不知道你需要什么来为我修复代码！谢谢你！而且我的英语太糟糕了我有一些语法错误）。我想问为什么当我单击 Hello 按钮时，它不会 appendChild() tbody 标记的子项，而只是 appendChild() tbody 标记？以及为什么我可以告诉浏览器只在使用或激活函数 BuildTable() 时运行这段代码。这是我要说的部分：

var table = document.getElementById("form");
var thead = table.getElementsByTagName("thead")[0];
var tbody = table.getElementsByTagName("tbody")[0];

var td = thead.getElementsByTagName("td");
var td_num = td.length;
var td_class = new Array();
for(a=0;a<tattribute.length;a++){
    td_class[a] = "td_" + a;
}
var td_tag = new Array();

for(a=0;a<elem;a++){
    var tr_tag = document.createElement("tr");
    for(b=0;b<td_num;b++){
        td_tag[b] = document.createElement("td");
        td_tag[b].className = td_class[b];
        td_tag[b].appendChild(document.createElement("input"));
        tr_tag.appendChild(td_tag[b]);
    }
    tbody.appendChild(tr_tag);
}

var tr = tbody.getElementsByTagName("tr");

function SubmitForm(){
    for(a=0;a<tr.length;a++){
        var td = tr[a].getElementsByTagName("td");
        for(b=0;b<td.length;b++){
            var input = td[b].getElementsByTagName("input");
            for(c=0;c<input.length;c++){
                td[b].innerHTML = "<p>" + input[c].value + "</p>";
            }
        }
    }
    document.getElementById("submit").value = "Edit";
    document.getElementById("submit").onclick = EditForm;
    document.getElementById("submit").parentNode.removeChild(document.getElementById("reset"));
}

function EditForm(){
    var p = tbody.getElementsByTagName("p");
    var p_value = new Array;
    for(i=0;i<p.length;i++){
        if("innerText" in p[i]){
            p_value[i] = p[i].innerText;
        }else{
            p_value[i] = p[i].textContent;
        }
    }
    for(a=0;a<tr.length;a++){
        var td = tr[a].getElementsByTagName("td");
        for(b=0;b<td.length;b++){
            td[b].innerHTML = "<input />";
        }
    }
    var input_tag = tbody.getElementsByTagName("input");
    for(i=0;i<input_tag.length;i++){
        input_tag[i].value = p_value[i];
    }
    document.getElementById("submit").value = "Save";
    document.getElementById("submit").onclick = SubmitForm;
    var reset = document.createElement("input");
    reset.className = "button";
    reset.id = "reset";
    reset.type = "reset";
    reset.value = "Reset";
    document.getElementById("submit").parentNode.appendChild(reset);
}

这是我的完整代码！

这是我的 HTML 代码

<!DOCTYPE html
        PUBLIC "-//W3C//DTD XTHML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Home</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link href="style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div id="wrapper">
            <h1>Periodic Table</h1>
            <form name="Periodic" method="post" action="#">
                <ul id="getInfo" style="list-style: none;">
                    <li id="elem">
                        <p>How many elements do you want to enter?</p>
                        <input />
                    </li>
                    <li id="content">
                        <ul></ul>
                    </li><!--END #content-->
                </ul>
            </form>
            <button onClick="getInfo(); BuildTable();">Hello</button>
        </div><!--END #wrapper-->
        <script src="settings.js" type="text/javascript"></script>
    </body>
</html>

这是我的 Javascript 代码：

// This part will make the input for people so that they can enter the information
var content = document.getElementById("content");
var content_ul = content.getElementsByTagName("ul")[0];
function AddContent(){
    var p = document.createElement("p");
    p.appendChild(document.createTextNode("Attribute of the elements you want to enter"));
    var input = document.createElement("input");
    input.style.display = "block";
    var add_button = document.createElement("button");
    add_button.onclick = AddContent;
    add_button.style.display = "block";
    add_button.appendChild(document.createTextNode("Add More Attribute"));
    var delete_button = document.createElement("button");
    delete_button.onclick = DeleteContent;
    delete_button.style.display = "block";
    delete_button.appendChild(document.createTextNode("Remove Attribute"));
    var li = document.createElement("li");
    li.appendChild(p);
    li.appendChild(input);
    li.appendChild(add_button);
    li.appendChild(delete_button);
    content_ul.appendChild(li);
    return false;
}
function DeleteContent(){
    var li = content.getElementsByTagName("li");
    var last_li = li.length - 1;
    if(last_li>0){
        content_ul.removeChild(li[last_li]);
        return false;
    }else{
        alert("Error! You can't remove this attribute");
        return false;
    }   
}
(function (){
    AddContent();
})();

// This part will take the input of people
var attribute = new Array();
var content_li = content_ul.getElementsByTagName("li");
var getInfo =  function (){
    var elem = document.getElementById("elem").getElementsByTagName("input")[0].value;

    for(a=0;a<content_li.length;a++){
        attribute[a] = content_li[a].getElementsByTagName("input")[0].value;
    }
    return{
        "elem": elem 
    }
}
var elem = getInfo().elem;


// Build a table with above value
function BuildTable(){
    document.Periodic.removeChild(document.getElementById("getInfo"));
    var form = document.createElement("form");
    form.id = "form";
    var form_table = document.createElement("table");

    //Create THEAD Tag
    var form_table_thead = document.createElement("thead");
    var form_table_thead_tr = document.createElement("tr");
    var form_table_thead_td = new Array();
    for(a=0;a<attribute.length;a++){
        form_table_thead_td[a] = document.createElement("td");
        form_table_thead_td[a].className = "td_" + a;
        form_table_thead_td[a].appendChild(document.createTextNode(attribute[a]));
        form_table_thead_tr.appendChild(form_table_thead_td[a]);
    }
    form_table_thead.appendChild(form_table_thead_tr);

    // Create TBODY Tag
    var form_table_tbody = document.createElement("tbody");
    var form_table_tbody_tr = new Array();
    for(a=0;a<elem;a++){
        form_table_tbody_tr[a] = document.createElement("tr");
        var form_table_tbody_tr_td = new Array();
        for(b=0;b<attribute.length;b++){
            form_table_tbody_tr_td[b] = document.createElement("td");
            var form_table_tbody_tr_td_input = document.createElement("input");
            form_table_tbody_tr_td[b].className = "td_" + b;
            form_table_tbody_tr_td[b].appendChild(form_table_tbody_tr_td_input);
            form_table_tbody_tr[a].appendChild(form_table_tbody_tr_td[b]);
            alert(form_table_tbody_tr_td[b].innerHTML);
        }
        form_table_tbody.appendChild(form_table_tbody_tr[a]);
    }
    form_table.appendChild(form_table_thead);
    form_table.appendChild(form_table_tbody);
    document.Periodic.appendChild(form_table);
}
var table = document.getElementById("form");
var thead = table.getElementsByTagName("thead")[0];
var tbody = table.getElementsByTagName("tbody")[0];

var td = thead.getElementsByTagName("td");
var td_num = td.length;
var td_class = new Array();
for(a=0;a<tattribute.length;a++){
    td_class[a] = "td_" + a;
}
var td_tag = new Array();

for(a=0;a<elem;a++){
    var tr_tag = document.createElement("tr");
    for(b=0;b<td_num;b++){
        td_tag[b] = document.createElement("td");
        td_tag[b].className = td_class[b];
        td_tag[b].appendChild(document.createElement("input"));
        tr_tag.appendChild(td_tag[b]);
    }
    tbody.appendChild(tr_tag);
}

var tr = tbody.getElementsByTagName("tr");

function SubmitForm(){
    for(a=0;a<tr.length;a++){
        var td = tr[a].getElementsByTagName("td");
        for(b=0;b<td.length;b++){
            var input = td[b].getElementsByTagName("input");
            for(c=0;c<input.length;c++){
                td[b].innerHTML = "<p>" + input[c].value + "</p>";
            }
        }
    }
    document.getElementById("submit").value = "Edit";
    document.getElementById("submit").onclick = EditForm;
    document.getElementById("submit").parentNode.removeChild(document.getElementById("reset"));
}

function EditForm(){
    var p = tbody.getElementsByTagName("p");
    var p_value = new Array;
    for(i=0;i<p.length;i++){
        if("innerText" in p[i]){
            p_value[i] = p[i].innerText;
        }else{
            p_value[i] = p[i].textContent;
        }
    }
    for(a=0;a<tr.length;a++){
        var td = tr[a].getElementsByTagName("td");
        for(b=0;b<td.length;b++){
            td[b].innerHTML = "<input />";
        }
    }
    var input_tag = tbody.getElementsByTagName("input");
    for(i=0;i<input_tag.length;i++){
        input_tag[i].value = p_value[i];
    }
    document.getElementById("submit").value = "Save";
    document.getElementById("submit").onclick = SubmitForm;
    var reset = document.createElement("input");
    reset.className = "button";
    reset.id = "reset";
    reset.type = "reset";
    reset.value = "Reset";
    document.getElementById("submit").parentNode.appendChild(reset);
}

谢谢你帮助我！

4

1 回答 1

2

这似乎是家庭作业（因为您的评论“我正在学习 Javascript，而我的老师说我只能使用 Javascript！”），所以我会给您一些提示来解决这个问题。

  1. elem在第 53 行定义为var elem = getInfo().elem;. 此脚本在页面加载时执行，您的 HTML 源代码没有输入值。Ergo，elem获取一个值，""所以你的循环添加input和td元素到表体永远不会运行。添加value="1"（或 2、30、400、30,000 等）的属性以供循环执行。

  2. 假设您确实希望在用户单击“Hello”按钮后执行循环，您需要将该循环放在不同的函数中，然后需要在该函数之后调用Build_Table();或简单地将其放在函数定义中（最后）而Build_Table不是添加value属性。

  3. 这段代码中的大多数错误将是两个文体问题的结果：

    • 您似乎不知道“变量提升”。您正在定义许多变量，由于提升，这些变量将无法正确初始化。在函数的顶部定义所有变量（因为这是在执行期间定义它们的地方），然后稍后在更合适的时间初始化它们。
    • 范围界定不足。大多数变量都在全局命名空间中声明（它们不需要在那里），这使得调试有点像噩梦。尝试将您的代码分解为更多函数，并且只声明这些函数的本地变量。如果您确实需要函数范围之外的变量（这种情况很少见或应该是），请定义一个全局变量并向其添加属性，以表示您在函数范围之外需要的变量。

以下是在全局命名空间中仅使用一个变量的示例：

var MyGlobalVar = {
    "someFunction": function () {
        var internalVariable = 0;
        if (!MyGlobalVar.externalVariable) {
            MyGlobalVar.externalVariable = 2;
        }
        return MyGlobalVar.externalVariable + internalVariable;
    },
    "logResults": function () {
        console.log(someFunction());
    };
};
MyGlobalVar.logResults();

我希望这对你的任务有所帮助并祝你好运。

于 2012-09-29T14:20:26.467 回答