主頁 > .NET開發 > 使用JavaScript編輯功能

使用JavaScript編輯功能

2022-06-28 16:48:09 .NET開發

我必須使用 javascript 在動態生成的行中添加、編輯和洗掉功能。我堅持使用編輯功能。雖然我已經搜索過并且可以完成,但是使用了 php。我不需要 php 。有人可以告訴我如何以簡單的方式制作它。添加和刪??除功能有效。但編輯功能不起作用。

 <script>
        document.write("<table id='TABLE' border='1' width='500'>");
            document.write("<tr>");
                document.write("<td>ID</td>");
                document.write("<td>Name</td>");
                document.write("<td>Address</td>");
                document.write("<td>Age</td>");
                document.write("<td>Action</td>");
            document.write("</tr>");

            document.write("<tr id='row1'>");
                document.write("<td id='id_row1'>1</td>");
                document.write("<td id='name_row1'>Anu</td>");
                document.write("<td id='address_row1'>Colombo</td>");
                document.write("<td id='age_row1'>20</td>");
                document.write("<td><button id='edit_button1' class='edit' onclick='editrow('1')'>Edit</button> <button id='save_button1' class='save' onclick='saverow('1')'>Save</button><button class='delete' onclick='deleterow()'>Delete</button></td>");
            document.write("</tr>");

            document.write("<tr id='row2'>");
                document.write("<td id='id_row2'><input type='text' id='new_id'></td>");
                document.write("<td id='name_row2'><input type='text' id='new_name'></td>");
                document.write("<td id='address_row2'><input type='text' id='new_address'></td>");
                document.write("<td id='age_row2'><input type='text' id='new_age'></td>");
                document.write("<td><button onclick='addrow()'>Add Row</button></td>");
            document.write("</tr>");
        document.write("</table>");

        function editrow(x){

            document.getElementById("edit_button" x).style.display="none";
            document.getElementById("save_button" x).style.display="block";
                
            var id=document.getElementById("id_row" x);
            var name=document.getElementById("name_row" x);
            var address=document.getElementById("address_row" x);
            var age=document.getElementById("age_row" x);

            var id_data=id.innerHTML;
            var name_data=name.innerHTML;
            var address_data=address.innerHTML;
            var age_data=age.innerHTML;
                
            var id_data="<input type='text' id='id_text" x "' value='" id_data "'>";
            var name_data="<input type='text' id='name_text" x "' value='" name_data "'>";
            var address_data="<input type='text' id='address_text" x "' value='" address_data "'>";
            var age_data="<input type='text' id='age_text" x "' value='" age_data "'>"; 
        } 

        function saverow(y){
            var id_val=document.getElementById("id_text" y).value;
            var name_val=document.getElementById("name_text" y).value;
            var address_val=document.getElementById("address_text" y).value;
            var age_val=document.getElementById("age_text" y).value;

            document.getElementById("id_row" y).innerHTML=id_val;
            document.getElementById("name_row" y).innerHTML=name_val;
            document.getElementById("address_row" y).innerHTML=address_val;
            document.getElementById("age_row" y).innerHTML=age_val;

            document.getElementById("edit_button" y).style.display="block";
            document.getElementById("save_button" y).style.display="none";
        }

        function deleterow() {
            var td = event.target.parentNode; 
            var tr = td.parentNode;
            tr.parentNode.removeChild(tr);
        }

        function addrow(){
            var new_id=document.getElementById("new_id").value;
            var new_name=document.getElementById("new_name").value;
            var new_address=document.getElementById("new_address").value;
            var new_age=document.getElementById("new_age").value;
                
            var mytable=document.getElementById("TABLE");
            var t_length=(mytable.rows.length)-1;
            var row = mytable.insertRow(t_length).outerHTML="<tr id='row" t_length "'><td id='id_row" t_length "'>" new_id "</td><td id='name_row" t_length "'>" new_name "</td><td id='address_row" t_length "'>" new_address "</td><td id='age_row" t_length "'>" new_age "</td><td><input type='button' id='edit_button" t_length "' value='Edit' class='edit' onclick='editrow(" t_length ")'> <input type='button' id='save_button" t_length "' value='Save' class='save' onclick='saverow(" t_length ")'> <input type='button' value='Delete' class='delete' onclick='deleterow(" t_length ")'></td></tr>";

            document.getElementById("new_id").value="";
            document.getElementById("new_name").value="";
            document.getElementById("new_address").value="";
            document.getElementById("new_age").value="";
        }
    </script>

uj5u.com熱心網友回復:

這是您的代碼中的一些更改,您必須將innerHtml代碼添加到editrow函式中

        document.write("<table id='TABLE' border='1' width='500'>");
            document.write("<tr>");
                document.write("<td>ID</td>");
                document.write("<td>Name</td>");
                document.write("<td>Address</td>");
                document.write("<td>Age</td>");
                document.write("<td>Action</td>");
            document.write("</tr>");

            document.write("<tr id='row1'>");
                document.write("<td id='id_row1'>1</td>");
                document.write("<td id='name_row1'>Anu</td>");
                document.write("<td id='address_row1'>Colombo</td>");
                document.write("<td id='age_row1'>20</td>");
                document.write("<td><button id='edit_button1' class='edit' onclick='editrow('1')'>Edit</button> <button id='save_button1' class='save' onclick='saverow('1')'>Save</button><button class='delete' onclick='deleterow()'>Delete</button></td>");
            document.write("</tr>");

            document.write("<tr id='row2'>");
                document.write("<td id='id_row2'><input type='text' id='new_id'></td>");
                document.write("<td id='name_row2'><input type='text' id='new_name'></td>");
                document.write("<td id='address_row2'><input type='text' id='new_address'></td>");
                document.write("<td id='age_row2'><input type='text' id='new_age'></td>");
                document.write("<td><button onclick='addrow()'>Add Row</button></td>");
            document.write("</tr>");
        document.write("</table>");

        function editrow(x){

            document.getElementById("edit_button" x).style.display="none";
            document.getElementById("save_button" x).style.display="block";
                
            var id=document.getElementById("id_row" x);
            var name=document.getElementById("name_row" x);
            var address=document.getElementById("address_row" x);
            var age=document.getElementById("age_row" x);

            var id_data=id.innerHTML;
            var name_data=name.innerHTML;
            var address_data=address.innerHTML;
            var age_data=age.innerHTML;
                
            var id_data="<input type='text' id='id_text" x "' value='" id_data "'>";
            var name_data="<input type='text' id='name_text" x "' value='" name_data "'>";
            var address_data="<input type='text' id='address_text" x "' value='" address_data "'>";
            var age_data="<input type='text' id='age_text" x "' value='" age_data "'>"; 

            id.innerHTML = (id_data);
            name.innerHTML = (name_data);
            address.innerHTML = (address_data);
            age.innerHTML = (age_data);
        } 

        function saverow(y){
            var id_val=document.getElementById("id_text" y).value;
            var name_val=document.getElementById("name_text" y).value;
            var address_val=document.getElementById("address_text" y).value;
            var age_val=document.getElementById("age_text" y).value;

            document.getElementById("id_row" y).innerHTML=id_val;
            document.getElementById("name_row" y).innerHTML=name_val;
            document.getElementById("address_row" y).innerHTML=address_val;
            document.getElementById("age_row" y).innerHTML=age_val;

            document.getElementById("edit_button" y).style.display="block";
            document.getElementById("save_button" y).style.display="none";
        }

        function deleterow() {
            var td = event.target.parentNode; 
            var tr = td.parentNode;
            tr.parentNode.removeChild(tr);
        }

        function addrow(){
            var new_id=document.getElementById("new_id").value;
            var new_name=document.getElementById("new_name").value;
            var new_address=document.getElementById("new_address").value;
            var new_age=document.getElementById("new_age").value;
                
            var mytable=document.getElementById("TABLE");
            var t_length=(mytable.rows.length)-1;
            var row = mytable.insertRow(t_length).outerHTML="<tr id='row" t_length "'><td id='id_row" t_length "'>" new_id "</td><td id='name_row" t_length "'>" new_name "</td><td id='address_row" t_length "'>" new_address "</td><td id='age_row" t_length "'>" new_age "</td><td><input type='button' id='edit_button" t_length "' value='Edit' class='edit' onclick='editrow(" t_length ")'> <input type='button' id='save_button" t_length "' value='Save' class='save' onclick='saverow(" t_length ")'> <input type='button' value='Delete' class='delete' onclick='deleterow(" t_length ")'></td></tr>";

            document.getElementById("new_id").value="";
            document.getElementById("new_name").value="";
            document.getElementById("new_address").value="";
            document.getElementById("new_age").value="";
        }

轉載請註明出處,本文鏈接:https://www.uj5u.com/net/496468.html

標籤:javascript html 打字稿 功能 文档.write

上一篇:從函式回傳二維陣列上的指標

下一篇:返回列表

標籤雲
其他(140916) Python(36178) JavaScript(23606) Java(15876) C(14648) 區塊鏈(8222) C#(7573) AI(7469) 爪哇(7061) html(6473) MySQL(6434) 基礎類(6313) 熊猫(5920) sql(5897) PHP(5550) 数组(5496) R(5186) 腳本語言(PerlPython)(5129) Linux(5047) 非技術區(4971) 反应(4890) Android(4340) 数据框(4187) css(4080) 节点.js(3801) C語言(3288) C++語言(3117) json(3088) 列表(3008) 扑(2915) 安卓(2867) 打字稿(2832) Java相關(2746) VBA(2708) 疑難問題(2699) 單片機工控(2479) 细绳(2447) ASP.NET(2287) iOS(2285) MongoDB(2229) 麻木的(2166) 正则表达式(2154) 字典(2139) 循环(2106) 擅长(2083) 镖(2037) 迅速(2034) Web開發(1951) 功能(1891) Unity3D(1814) python-3.x(1807) 弹簧靴(1806) 谷歌表格(1800) 網絡通信(1793) xml(1783) 蟒蛇-3.x(1774) 數據庫相關(1767) .NETCore(1761) VB基礎類(1755) for循环(1754)

熱門瀏覽
  • WebAPI簡介

    Web體系結構: 有三個核心:資源(resource),URL(統一資源識別符號)和表示 他們的關系是這樣的:一個資源由一個URL進行標識,HTTP客戶端使用URL定位資源,表示是從資源回傳資料,媒體型別是資源回傳的資料格式。 接下來我們說下HTTP. HTTP協議的系統是一種無狀態的方式,使用請求/ ......

    uj5u.com 2020-09-09 22:07:47 more
  • asp.net core 3.1 入口:Program.cs中的Main函式

    本文分析Program.cs 中Main()函式中代碼的運行順序分析asp.net core程式的啟動,重點不是剖析原始碼,而是理清程式開始時執行的順序。到呼叫了哪些實體,哪些法方。asp.net core 3.1 的程式入口在專案Program.cs檔案里,如下。ususing System; us ......

    uj5u.com 2020-09-09 22:07:49 more
  • asp.net網站作為websocket服務端的應用該如何寫

    最近被websocket的一個問題困擾了很久,有一個需求是在web網站中搭建websocket服務。客戶端通過網頁與服務器建立連接,然后服務器根據ip給客戶端網頁發送資訊。 其實,這個需求并不難,只是剛開始對websocket的內容不太了解。上網搜索了一下,有通過asp.net core 實作的、有 ......

    uj5u.com 2020-09-09 22:08:02 more
  • ASP.NET 開源匯入匯出庫Magicodes.IE Docker中使用

    Magicodes.IE在Docker中使用 更新歷史 2019.02.13 【Nuget】版本更新到2.0.2 【匯入】修復單列匯入的Bug,單元測驗“OneColumnImporter_Test”。問題見(https://github.com/dotnetcore/Magicodes.IE/is ......

    uj5u.com 2020-09-09 22:08:05 more
  • 在webform中使用ajax

    如果你用過Asp.net webform, 說明你也算是.NET 開發的老兵了。WEBform應該是2011 2013左右,當時還用visual studio 2005、 visual studio 2008。后來基本都用的是MVC。 如果是新開發的專案,估計沒人會用webform技術。但是有些舊版 ......

    uj5u.com 2020-09-09 22:08:50 more
  • iis添加asp.net網站,訪問提示:由于擴展配置問題而無法提供您請求的

    今天在iis服務器配置asp.net網站,遇到一個問題,記錄一下: 問題:由于擴展配置問題而無法提供您請求的頁面。如果該頁面是腳本,請添加處理程式。如果應下載檔案,請添加 MIME 映射。 WindowServer2012服務器,添加角色安裝完.netframework和iis之后,運行aspx頁面 ......

    uj5u.com 2020-09-09 22:10:00 more
  • WebAPI-處理架構

    帶著問題去思考,大家好! 問題1:HTTP請求和回傳相應的HTTP回應資訊之間發生了什么? 1:首先是最底層,托管層,位于WebAPI和底層HTTP堆疊之間 2:其次是 訊息處理程式管道層,這里比如日志和快取。OWIN的參考是將訊息處理程式管道的一些功能下移到堆疊下端的OWIN中間件了。 3:控制器處理 ......

    uj5u.com 2020-09-09 22:11:13 more
  • 微信門戶開發框架-使用指導說明書

    微信門戶應用管理系統,采用基于 MVC + Bootstrap + Ajax + Enterprise Library的技術路線,界面層采用Boostrap + Metronic組合的前端框架,資料訪問層支持Oracle、SQLServer、MySQL、PostgreSQL等資料庫。框架以MVC5,... ......

    uj5u.com 2020-09-09 22:15:18 more
  • WebAPI-HTTP編程模型

    帶著問題去思考,大家好!它是什么?它包含什么?它能干什么? 訊息 HTTP編程模型的核心就是訊息抽象,表示為:HttPRequestMessage,HttpResponseMessage.用于客戶端和服務端之間交換請求和回應訊息。 HttpMethod類包含了一組靜態屬性: private stat ......

    uj5u.com 2020-09-09 22:15:23 more
  • 部署WebApi隨筆

    一、跨域 NuGet參考Microsoft.AspNet.WebApi.Cors WebApiConfig.cs中配置: // Web API 配置和服務 config.EnableCors(new EnableCorsAttribute("*", "*", "*")); 二、清除默認回傳XML格式 ......

    uj5u.com 2020-09-09 22:15:48 more
最新发布
  • 使用JavaScript編輯功能

    我必須使用 javascript 在動態生成的行中添加、編輯和洗掉功能。我堅持使用編輯功能。雖然我已經搜索過并且可以完成,但是使用了 php。我不需要 php 。有人...

    uj5u.com 2022-06-28 16:48:09 more
  • 從函式回傳二維陣列上的指標

    我是 C 新手,正在嘗試更改函式的回傳型別。問題是,例如,這些作業:float fct(int) float *fct(float)但是當我嘗試將回傳型別更改為:float (*)[n]fct(int *n) 編...

    uj5u.com 2022-06-28 16:47:31 more
  • OracleSQL用戶定義函式

    我正在嘗試撰寫 Oracle SQL 函式。應將國家代碼、最小年份和最大年份作為輸入,并應回傳包含該國家在指定年份的資訊的表。這是我試圖寫的,但我是 SQL 函式的...

    uj5u.com 2022-06-28 16:46:31 more
  • Python打字機函式在輸入中使用時不回傳任何內容?

    import random,sys,time,os os.system("cls")def dialogue(passage): # Function for dialogue to type slowly for letter in passa...

    uj5u.com 2022-06-28 16:45:52 more
  • 檢查字串是否由多次出現的子字串組成

    (JavaScript) 所以,我需要一個函式 checkString(str, substr) 來檢查一個字串是否由給定子字串的多次出現組成。
    示例:
    checkString("abc", "abc") -> true
    c...

    uj5u.com 2022-06-28 16:45:02 more
  • SweetAlert2Yes/No-如何為PHP集成一個函式?

    我使用 Sweet Alert 2 進行漂亮的對話。現在我想用它來解決一個安全問題,是否應該洗掉資料庫條目。顯示對話框沒問題,但如果確認洗掉,我找不到集成功能的方法...

    uj5u.com 2022-06-28 16:44:03 more
  • 在打字稿中實作帶有型別引數的函式時是否可以參考型別

    我想在打字稿中拆分型別規范和函式的實作例如:如果我有這樣的型別type MyFuncType = () => void我可以創建一個作為該型別實體的實作,如下所示:const myFuncIm...

    uj5u.com 2022-06-28 16:43:29 more
  • 無法擺脫全域變數(需要使其成為非全域變數)

    我正在開發一個顯示播放串列總持續時間的網路應用程式。在這里,我們正在處理 YouTube API。我想知道我應該如何擺脫全域變數newPageToken。此外,我仍然需要在...

    uj5u.com 2022-06-28 16:42:49 more
  • C#檢查部分是否相交

    我有一個連續的 N 個固定尺寸的垂直和水平部分的串列,以一系列方向的形式(右→;左←;下↓;上↑)。如果這些部分相交,程式應該回傳 true。例如:N = 6: { 上、左、下...

    uj5u.com 2022-06-28 16:41:52 more
  • 不能在BMI計算器中使用浮點數

    我已經構建了以下代碼:# function to calculate bmi and return a result based on user inputdef calculatebmi(weight, height): bmivalue = weight //...

    uj5u.com 2022-06-28 16:40:55 more