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

Edit HTML table and capture changes as POST using Javascript

本文关键字：POST 编辑 Javascript HTML 使用      更新时间：2023-09-26

我刚开始使用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++) {

----------↑（是，箭头指向变量i）

我想在单击Save时捕获更改，并且在单击下面的提交按钮后，应该通过POST方法捕获该页面中的任何更改。Submit被重定向到action="/update/"。请告诉我该怎么办。

为了避免此类问题，请在其作用域的开头定义所有变量（在Javascript的情况下，作用域是一个函数）

相关文章：