1. 首頁
  2. 問答
  3. 如何使用JavaScript在文本框中插入HTML表的特定單元格值？

如何使用JavaScript在文本框中插入HTML表的特定單元格值？

2015-12-29 30 views
-3

我有一個HTML表單。保存和刪除按鈕工作正常。但我想編寫JavaScript（不是jQuery或AngularJS）編輯和更新按鈕的代碼。當我點擊編輯時，特定行的數據應該顯示在文本框中，當我按下更新按鈕時，該特定行的更新數據應該被提交到HTML表格中。如何使用JavaScript在文本框中插入HTML表的特定單元格值？

function addRow() { 
    var id= document.getElementById("id"); 
    var name= document.getElementById("name"); 
    var gender= document.getElementById("gender"); 
    var address= document.getElementById("address"); 
    var email = document.getElementById("email"); 
    var table = document.getElementById("myTableData"); 

    var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount); 

    row.insertCell(0).innerHTML= id.value; 
    row.insertCell(1).innerHTML= name.value; 
    row.insertCell(2).innerHTML= gender.value; 
    row.insertCell(3).innerHTML= address.value; 
    row.insertCell(4).innerHTML= email.value; 

    row.insertCell(5).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">'; 
    row.insertCell(6).innerHTML= '<input type="button" value = "Edit" onClick="Javacsript:updateRow(this)">'; 

    id.value=""; 
    name.value=""; 
    gender.value=""; 
    address.value=""; 
    email.value=""; 


} 
function updateRow(obj){ 



} 
function reset(){ 

    var id= document.getElementById("id"); 
    var name= document.getElementById("name"); 
    var gender= document.getElementById("gender"); 
    var address= document.getElementById("address"); 
    var email = document.getElementById("email"); 
    var table = document.getElementById("myTableData"); 

    id.value=""; 
    name.value=""; 
    gender.value=""; 
    address.value=""; 
    email.value=""; 
} 


function deleteRow(obj) { 

    var index = obj.parentNode.parentNode.rowIndex; 
    var table = document.getElementById("myTableData"); 
    table.deleteRow(index); 
    } 
}

來源

2015-12-29 Deepak Yadav

+0

你能提供HTML或Fiddle嗎？如何運行/調試代碼？ – Rayon

+1

在我看來，你已經知道如何做你想做的事情：你知道如何將函數附加到HTML，你知道使用'innerHTML'獲取和設置HTML元素是很熱門的。你不明白什麼？ –

+0

我想要編輯和更新按鈕的兩個功能，我無法實現。任何幫助，將不勝感激。 –

回答

0

附加功能看起來像這樣.. 

function addRow() { 
     var table = document.getElementById("myTableData"); 

     var rowCount = table.rows.length; 
     var row = table.insertRow(rowCount); 
     var id = document.getElementById("id"); 
     var name = document.getElementById("name"); 
     var gender = document.getElementById("gender"); 
     var address = document.getElementById("address"); 
     var email = document.getElementById("email"); 

     var cell1 = row.insertCell(0); 
     cell1.innerHTML=id.value; 

     var cell2 = row.insertCell(1); 
     cell2.innerHTML = name.value; 
     var cell3 = row.insertCell(2); 
     cell3.innerHTML = gender.value; 

     var cell4 = row.insertCell(3); 
     cell4.innerHTML = address.value; 
     var cell5 = row.insertCell(4); 
     cell5.innerHTML = email.value;   
     var cell6 = row.insertCell(5); 
     var strHtml5 = "<INPUT TYPE=\"Button\" CLASS=\"Button\" onClick=\"UpdateRow(" + rowCount + ")\" VALUE=\"Update Row\">|<INPUT TYPE=\"Button\" CLASS=\"Button\" onClick=\"delRow(" + rowCount + ")\" VALUE=\"Delete Row\">"; 

     cell6.innerHTML = strHtml5;  
    } 
</script>

來源

2015-12-29 07:49:42 Nitin

0

我複製你的代碼，並在我的機器上執行，發現小錯誤以及不使用表單標籤大錯，你沒有通過並創建了該表單。

逆向工程後，我附加了你的代碼，並使其功能齊全，而且易於理解。

<!DOCTYPE html> 
<html> 
<head> 
<title>HTML dynamic table using JavaScript</title> 
    <!-- ### <script type="text/javascript" src="D:\LatestNewProject-JavaScript\script.js"></script> --> 
</head> 
<body> 
<div id="myform"> 
<b>Employee Information</b> 
<form method="post" action=""> <!-- ###Form tag is not used --> 
<table> 

    <tr> 
    <td>ID:</td> <!-- ###change id to empId as id="id" will cause ambiguity --> 
    <td><input type="text" id="empId"></td> <!-- ###use text field instead of number to make input of 3 digit no. easy --> 
    </tr> 
    <tr> 
    <td>Name:</td> 
    <td><input type="text" id="name"></td> 
    </tr> 
    <tr> 
    <td>Gender:</td> <!-- ### imstead of select option you must use radio button --> 
    <td> <input type="radio" id="gender" value="male" /> Male <br> 
     <input type="radio" id="gender" value="Female" /> FeMale 
    </td> 
    </tr> 
    <tr> 
    <td>Address:</td> 
    <td><input type="textarea" id="address"></td> <!-- ###insted of text field you should give textarea field--> 
    </tr> 
    <tr> 
    <td>Email:</td> <!-- ###email is new element in HTML5 so, id="email" can cause issue, so email=Email --> 
    <td><input type="email" id="mail" name="Email"></td> 
    </tr> 
    &nbsp; 
    <!-- No need to use this [<table>] --> <!-- ### onclick should be onClick [best practice]--> 
    <tr> 
    <td><input type="button" id="add" value="Add" onclick="javascript:addRow()"></td> 
    <td><input type="reset" value="Reset" /> </td> 
    <td><input type="button" id="update" value="Update" onClick=""></td> 
    </tr> 
    <tr> 
     <td>&nbsp;</td> 
     <td>&nbsp;</td> 
    </tr> 
</table> 
</div> 

<div id="mydata"> 

<table id="myTableData" border="1" cellpadding="2"> 
    <tr> 

     <td><b>ID</b></td> 
     <td><b>Name</b></td> 
     <td><b>Gender</b></td> 
     <td><b>Address</b></td> 
     <td><b>Email</b></td> 
     <td><b>Action</b></td> 

    </tr> 
</table> 
</div> 
<!-- ============ JavaScript ========== --> 
<script> 
function addRow() { 
    var id= document.getElementById("empId"); 
    var name= document.getElementById("name"); 
    var gender= document.getElementById("gender"); 
    var address= document.getElementById("address"); 
    var email = document.getElementById("mail"); 
    var table = document.getElementById("myTableData"); 

    var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount); 

    row.insertCell(0).innerHTML= empId.value; 
    row.insertCell(1).innerHTML= name.value; 
    row.insertCell(2).innerHTML= gender.value; 
    row.insertCell(3).innerHTML= address.value; 
    row.insertCell(4).innerHTML= mail.value; 

    row.insertCell(5).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">'; 
    row.insertCell(6).innerHTML= '<input type="button" value = "Edit" onClick="Javacsript:updateRow(this)">'; 

    empId.value=""; 
    name.value=""; 
    gender.value=""; 
    address.value=""; 
    mail.value=""; 


} 
function updateRow(obj){ 

} 
function reset(){ 

    var id= document.getElementById("empId"); 
    var name= document.getElementById("name"); 
    var gender= document.getElementById("gender"); 
    var address= document.getElementById("address"); 
    var email = document.getElementById("mail"); 
    var table = document.getElementById("myTableData"); 

    empId.value=""; 
    name.value=""; 
    gender.value=""; 
    address.value=""; 
    mail.value=""; 
} 


function deleteRow(obj) { 

    var index = obj.parentNode.parentNode.rowIndex; 
    var table = document.getElementById("myTableData"); 
    table.deleteRow(index); 
    } 


</script> 

</body> 
</html>

來源

2015-12-29 12:19:13

相關問題

 相關問題