Question

我刚刚开始使用javascript和html，所以如果我做错了，请纠正我。我试图编辑一个html表格。

{%extends 'base.html'%}
{%block content%}
<html>
<body>
<h4> Search results</h4>
<p id="data"></p>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
<form id="update" action="/update/" method="POST">
<script>
function onEdit(btn)
{
    var id=btn.id;
    if(btn.value=="Edit") {
            var input = document.getElementsByName("name"+id);
            for(i = 0;i < input.length; i++) {
            document.getElementById(input[i].id).removeAttribute("Readonly");
            } //End of for loop
            document.getElementById(id).value="Save";

            return false;
    }
    if(btn.value=="Save") {
        for(i = 0;i < input.length; i++) {
            document.getElementById(input[i].id).setAttribute("Readonly", "readonly");
            }
        document.getElementById(id).value="Edit";
        return false;
    }

} // End of Function onEdit()

{% autoescape off %}
var data = {{ search|safe }}; //This will be the json value returned by django view
{% endautoescape %}
text = ''
var out = "<table style=\"width:50%\">";
out +=    "<tr>";
out +=    "<th>Domain</th>";
out +=    "<th>Points to</th>";
out +=    "<th>Type</th>";
out +=    "<th>TTL</th>";
out +=  "</tr>";
var i 
var id = 0;
for ( var i = 0; i < data.records.length; i++) {
id = id + 1;
out += "<tr><td>" +
"<input readonly='readonly' name='name" + id + "' id='" + data.records[i].domain + "' value='" + data.records[i].domain + "'type='text'/>" +
"</td><td>" +
"<input readonly='readonly' name='name" + id + "' id='" + data.records[i].record_points_to + "' value='" + data.records[i].record_points_to +"'type='text'/>" +
"</td><td>" +
data.records[i].record +
"</td><td>" +
"<input readonly='readonly' name='name" + id + "' id='" + data.records[i].ttl + "' value='" + data.records[i].ttl + "'type='text'/>" +
"</td><td>" +
"<input id='" + id + "' value='Edit' onclick='return onEdit(this)' type='button'/>" +
"</td></tr>";
}
out += "</table>"

total = data.meta.total_records
page = data.meta.page
records_returned = data.records.length
records_shown = ((data.meta.page - 1) * 30) + data.records.length

out += records_shown + " returned of " + total
page = data.meta.page + 1
link = window.location.href
if (records_shown == total){
out += " End "
}
else{
url ="<a href='" + updateQueryStringParameter(link, "page", page) + "'> Next"

out += url
}
function updateQueryStringParameter(uri, key, value) {
  var re = new RegExp("([?&])" + key + "=.*?(&|$)", "i");
  var separator = uri.indexOf('?') !== -1 ? "&" : "?";
  if (uri.match(re)) {
    return uri.replace(re, '$1' + key + "=" + value + '$2');
  }
  else {
    return uri + separator + key + "=" + value;
  }
}


document.getElementById("data").innerHTML = out
</script>
<input type="submit" value="Submit">
</form>

我按预期显示页面。

我想要实现的是使这些html表可编辑，这也是一半的工作。当我单击“编辑”按钮时，表格链接变为可编辑状态，我可以更改该值，“编辑”按钮将更改为“保存”。但是当我点击“保存”按钮时，出现了firebug错误

TypeError: input is undefined

for(i = 0;i < input.length; i++) {

----------↑ （是的，箭头指向var i）

我想在单击“保存”时捕获更改，并且一旦点击下面的“提交”按钮，应该通过POST方法捕获该页面中的任何更改。提交重定向到action="/update/"。请让我知道该怎么做。

Answer 1

要避免此类问题，请在其范围的开头定义所有变量（范围是Javascript情况下的函数）

使用Javascript编辑HTML表并将更改捕获为POST

1 个答案: