用輸入更新html表格

我是第一次學習js，html，css和一般web開發，我想創建一個簡單的（或者我認爲的）表格，我可以使用它來保持項目的跟蹤我目前擁有。用輸入更新html表格

本質上我想要做的是製作一個動態大小的表，可以採取和保存輸入。

我正在考慮一種方法來創建一些JavaScript函數，以便從給定的輸入中將標記添加到我的表中。我看到一個個人網站，開發人員在這裏提供了一個帶有提交按鈕的輸入框，使數據被添加到另一個html文件表格的表格中。

舉例來說，如果我有：

<table id="inventory"> 
    <thead> 
    <tr> 
     <th>Item Name</th> 
     <th>Item Number</th> 
     <th>Item Color</th> 
    </tr> 
    </thead> 
</table>

這將有可能對我說加

<tr class = "boxType"> 
    <th>BoxV1</th> 
    <th>#1111</th> 
    <th>Blue</th> 
</tr>

以上塊到使用JavaScript和輸入表？

我試過在網絡周圍窺探之後做了一個addRows方法，並且創建了一個表格的臨時版本，當刷新時它將是空的（意味着它沒有放入代碼中，而是添加到該會話中）如果可能的話，我想永久地將它粘在桌子上。

編輯：一些想法，我有：

我覺得可以的東西，如果我做一個< TBODY ID =「列表」 >和使用某種形式的innerHTML的在添加<TR>塊做什麼？

也許使用一些PHP的形式，以更新HTML表塊？

謝謝！

來源

2016-04-21 Tyler

使用innerHTML或jQuery的HTML（）函數和localStorage的跟蹤更新DOM內容。還請記住在頁面加載時重新加載舊數據。看到我的完整的例子：

http://jsbin.com/voroku/edit?html,output

HTML INPUT：

<input type="text" id="one"> 
<input type="text" id="two"> 
<input type="text" id="three"> 
<button onclick="addRow()">ADD</button>

JS功能：

$(document).ready(function(){ 
    $('#screen').html(localStorage.getItem("data")); 

}); 
function addRow(){ 
     var str = '<tr class = "boxType">\ 
       <td>'+$('#one').val()+'</td>\ 
       <td>'+$('#two').val()+'</td>\ 
       <td>'+$('#three').val()+'</td>\ 
       </tr>'; 
     $('#screen').append(str); 

     localStorage.setItem("data", $('#screen').html()); 
    }

來源

2016-04-21 19:03:26 JoviaArk

我相信這種格式只保存會話專用副本？我希望有些事情偶爾會去檢查並更新 – Tyler

，因爲您需要將內容保存到服務器。 – JoviaArk

沒有辦法將它放入代碼？如何處理某種形式的PHP？我可以接受輸入並把它放進桌子嗎？（知道它可能會凌亂） – Tyler

您可以使用localStorage來保存您添加的行並在瀏覽器刷新時加載它們。如果本地存儲被清除，或者您更改了瀏覽器，它們將不會被保存。

永久保存您輸入的信息的方式是擁有數據庫並將數據存儲在那裏。這可以通過使用「後端」來處理信息請求，從數據庫檢索記錄並將其發送回javascript/html頁面來完成。

構建後端以處理這些請求的方法有很多，我熟悉使用運行在服務器上的c＃和SQL數據庫來存儲信息。描述所有可能的實現遠遠超出了這個問題的範圍。

說了這麼多，這些方法都沒有將你輸入的數據添加到代碼中。當你在表格中輸入行時，你的JavaScript文件不會被更新。會發生什麼情況是您的javascript有一個函數來請求表的所有行（從localStorage或從請求到服務器），然後遍歷所檢索的信息並從結果中爲表生成HTML。

來源

2016-04-21 18:59:31 IrkenInvader

是否可以使用innerHTML方法和tbody id的混合，以便將tr塊添加到tbody中？ – Tyler

是的，你可以用這種方式將行添加到你的表中。訣竅就像你發現的那樣 - 在事實之後保存行。我可能會寫一個使用localStorage來存儲信息的快速演示，因爲這是存儲數據以構建表的簡單方法。儘管如此，它幾乎不像一個合適的服務器和數據庫那樣強大。 – IrkenInvader

你會怎麼說一個PHP表單來更新html，方法是在提交的表格中插入代碼塊？或者那是另一個小姐？我希望在我的網站上隱藏一個頁面，以便我可以從任何地方查看錶格。 – Tyler

在你的JavaScript功能的更多信息：給你tbody一個ID如bodyId document.getElementById("bodyId").innerHtml += "<tr class = 'boxType' <th>BoxV1</th<th>#1111</th><th>Blue</th</tr>"

來源

2016-04-21 19:03:11

你基本上只需要創建一個新的行，作爲一個字符串你JavaScript文件/部分，並將其附加到現有表中：（使用jQuery）

var newRow = "my new row in html"; 

$("mytable").append(newRow);

來源

2016-08-18 22:25:32

這實際上並沒有創建一個行。如果'VAR NEWROW = 「錘紅」;'這將創建一個項目名稱一排：錘子，項目編號：53，項目顏色：紅色。您還應該使用選擇器作爲$（「＃inventory」）來實際提供工作代碼。 – pr0gramist

好的，非常感謝您的反饋，我將在未來竭盡全力 –

用輸入更新html表格

回答

相關問題