編輯HTML表格並使用Javascript捕獲更改爲POST

我剛剛開始使用javascript和html，所以如果我以錯誤的方式進行操作，請糾正我的錯誤。我試圖編輯一個HTML表格。編輯HTML表格並使用Javascript捕獲更改爲POST

{%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表格可編輯，這也是工作的一半。當我單擊編輯按鈕時，表格鏈接變爲可編輯，我可以更改該值，並且編輯按鈕更改爲保存。但是，當我點擊「保存」按鈕，螢火蟲錯誤顯示

TypeError: input is undefined

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

----------↑ （是的，箭頭指向變種I）

我想捕捉時的變化我點擊保存，只要點擊下面的提交按鈕，就可以通過POST方法捕獲該頁面的任何更改。提交被重定向到action="/update/"。請讓我知道我該怎麼做。

來源

2015-02-09 nohup

您在「編輯」分配變量_input_，而不是在「保存」。這可能是問題嗎？ – 2015-02-09 20:47:24

我需要咖啡因。是的，我錯了一個'if'塊。人爲錯誤。我可以從這裏拿走它。請在答案部分更新，我會接受它。謝謝你，阿爾瓦羅。 – nohup 2015-02-09 20:55:34

很高興它的工作，並沒有必要把它作爲一個答案，因爲它是一個非常具體的事情。祝你好運！ – 2015-02-09 20:59:04

避免這樣的問題，請在其範圍的開始定義所有變量（範圍在Javascript的情況下，一個功能）

來源

2015-03-06 13:09:00

編輯HTML表格並使用Javascript捕獲更改爲POST

回答

相關問題