1. Zuhause
  2. Frage und Antwort
  3. Wie Option Bearbeiten in diesem Javascript-Programm aktivieren

Wie Option Bearbeiten in diesem Javascript-Programm aktivieren

2016-06-22 3 views
0

Ich habe ein Programm JavaScript Datensätze aus einem Formular Tabelle hinzuzufügen i AddRow() erstellt, reset(), DeleteRow() Funktionen in diesem Programm, aber ich bin nicht in der Lage, die EditRow() Funktion in diesem Programm zu erstellen.Wie Option Bearbeiten in diesem Javascript-Programm aktivieren

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:EditRow(this)">'; 
 
    empId.value = ""; 
 
    name.value = ""; 
 
    gender.value = ""; 
 
    address.value = ""; 
 
    mail.value = ""; 
 
} 
 

 
function EditRow(obj) { 
 
    alert('How to implement this ?'); 
 
} 
 

 
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); 
 
}
<div id="myform"> 
 
    <b>Employee Information</b> 
 
    <form method="post" action=""> 
 
    <table> 
 
     <tr> 
 
     <td>ID:</td> 
 
     <td> 
 
      <input type="text" id="empId"> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td>Name:</td> 
 
     <td> 
 
      <input type="text" id="name"> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td>Gender:</td> 
 
     <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> 
 
     </tr> 
 
     <tr> 
 
     <td>Email:</td> 
 
     <td> 
 
      <input type="email" id="mail" name="Email"> 
 
     </td> 
 
     </tr> 
 
     &nbsp; 
 
     <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> 
 
    </form> 
 
</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>

Quelle

2016-06-22 surendran prabhakaran

+0

Hallo Surendran, willkommen in SO. *** Warum *** unfähig? Lassen Sie niemanden seine Faulheit glauben. Lesen Sie http://stackoverflow.com/help/how-to-ask, bevor Sie Ihre nächste Frage stellen. –

Antwort

1

Verwendung so ... habe ich versteckten Eingabetyp Daten und bearbeiten und Update-Funktion zu aktualisieren.

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>HTML dynamic table using JavaScript</title> 
 

 
</head> 
 
<body> 
 
<div id="myform"> 
 
<b>Employee Information</b> 
 
<form method="post" action=""> 
 
<table> 
 

 
<tr> 
 
<td>ID:</td> 
 
<td><input type="text" id="empId"></td> 
 
</tr> 
 
<tr> 
 
<td>Name:</td> 
 
<td><input type="text" id="name"></td> 
 
</tr> 
 
<tr> 
 
<td>Gender:</td> 
 
<td> <input type="radio" name="gender" id="male" value="male" /> Male <br> 
 
    <input type="radio" name="gender" id="female" value="Female" /> FeMale 
 
</td> 
 
</tr> 
 
<tr> 
 
<td>Address:</td> 
 
<td><input type="textarea" id="address"></td> 
 
</tr> 
 
<tr> 
 
<td>Email:</td> 
 
<td><input type="email" id="mail" name="Email"></td> 
 
</tr> 
 
&nbsp; 
 

 
<tr> 
 
<td><input type="button" id="add" value="Add" onclick="javascript:addRow()"></td> 
 
<td><input type="reset" value="Reset" /> </td> 
 
<td> 
 
\t <input type="hidden" id="updateid" value=""> 
 
\t <input type="button" id="update" value="Update" onClick="javascript:UpdateRow()"> 
 

 
</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> 
 

 
<script> 
 
function addRow() { 
 
var id= document.getElementById("empId"); 
 
var name= document.getElementById("name"); 
 
var address= document.getElementById("address"); 
 
var email = document.getElementById("mail"); 
 
var table = document.getElementById("myTableData"); 
 

 
if(document.getElementById("male").checked){ \t 
 
\t var gender="Male"; 
 
}else if(document.getElementById('female').checked) { 
 
\t var gender="Female"; 
 
} 
 

 
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; 
 
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:EditRow(this)">'; 
 

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

 

 
} 
 
function EditRow(obj){ 
 
var table = document.getElementById("myTableData"); 
 
var index = obj.parentNode.parentNode.rowIndex; 
 
var row = table.rows[index]; 
 

 
var id= document.getElementById("empId"); 
 
var name= document.getElementById("name"); 
 

 
if(row.cells[2].innerHTML == "Male"){ 
 
\t document.getElementById("male").checked = true; 
 
}else{ 
 
\t document.getElementById("female").checked = true; 
 
} 
 

 

 
var address= document.getElementById("address"); 
 
var email = document.getElementById("mail"); 
 
var updateid= document.getElementById("updateid"); 
 

 
id.value=row.cells[0].innerHTML; 
 
name.value=row.cells[1].innerHTML; 
 
address.value=row.cells[3].innerHTML; 
 
email.value=row.cells[4].innerHTML; 
 
updateid.value=index; 
 
} 
 
function UpdateRow(){ 
 

 
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"); \t 
 
var updateid= document.getElementById("updateid"); 
 
var table = document.getElementById("myTableData"); 
 

 
if(document.getElementById("male").checked){ 
 
\t gender="Male"; 
 
}else{ 
 
\t gender="Female"; 
 
} 
 

 
var row = table.rows[updateid.value]; 
 

 
row.cells[0].innerHTML= id.value; 
 
row.cells[1].innerHTML= name.value; 
 
row.cells[2].innerHTML= gender; 
 
row.cells[3].innerHTML= address.value; 
 
row.cells[4].innerHTML= email.value; 
 

 
id.value=""; 
 
name.value=""; 
 
gender.value=""; 
 
address.value=""; 
 
email.value=""; 
 
updateid.value=""; 
 
} 
 
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>

Quelle

2016-06-22 06:19:14 Mani

+0

Hallo Mani Thanku für Ihre Hilfe wird alles in Ordnung sein, aber wir können nicht das Geschlecht in der Tabelle bearbeiten, also bitte geben Sie mir einen Vorschlag für mich .. –

+0

Verwenden Sie verschiedene ID-Namen für das Geschlecht. Ich habe den Code geändert. einmal prüfen. – Mani

0

diese

var txt = null; 
 

 
function addRow() { 
 
    var id = document.getElementById("empId"); 
 
    var name = document.getElementById("name"); 
 
    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 = document.querySelector('input[name="genderS"]:checked').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:EditRow(this)">'; 
 

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

 
function EditRow(obj) { 
 

 
    txt = obj.parentNode.parentNode.rowIndex; 
 
    var tr = document.getElementById("myTableData").getElementsByTagName("tr") 
 
    document.getElementById("empId").value = tr[txt].getElementsByTagName("td")[0].innerHTML; 
 
    document.getElementById("name").value = tr[txt].getElementsByTagName("td")[1].innerHTML; 
 
    document.getElementById(tr[txt].getElementsByTagName("td")[2].innerHTML).checked = true; 
 
    document.getElementById("address").value = tr[txt].getElementsByTagName("td")[3].innerHTML; 
 
    document.getElementById("mail").value = tr[txt].getElementsByTagName("td")[4].innerHTML; 
 

 
} 
 

 
function updateRow() { 
 
    if (txt != null) { 
 
     var tr = document.getElementById("myTableData").getElementsByTagName("tr"); 
 
     tr[txt].getElementsByTagName("td")[0].innerHTML = document.getElementById("empId").value; 
 
     tr[txt].getElementsByTagName("td")[1].innerHTML = document.getElementById("name").value; 
 
     tr[txt].getElementsByTagName("td")[2].innerHTML = document.querySelector('input[name="genderS"]:checked').value; 
 
     tr[txt].getElementsByTagName("td")[3].innerHTML = document.getElementById("address").value; 
 
     tr[txt].getElementsByTagName("td")[4].innerHTML = document.getElementById("mail").value; 
 
     txt = null; 
 
     document.getElementById("reset").click(); 
 
    } else { 
 
     console.log("edit row first"); 
 
    } 
 
} 
 

 
function deleteRow(obj) { 
 
    var index = obj.parentNode.parentNode.rowIndex; 
 
    var table = document.getElementById("myTableData"); 
 
    table.deleteRow(index); 
 
}
<div id="myform"> 
 
    <b>Employee Information</b> 
 
    <form method="post" action=""> 
 
    <table> 
 
     <tr> 
 
     <td>ID:</td> 
 
     <td> 
 
      <input type="text" id="empId"> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td>Name:</td> 
 
     <td> 
 
      <input type="text" id="name"> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td>Gender:</td> 
 
     <td> 
 
      <input type="radio" name="genderS" id="male" value="male" />Male 
 
      <br> 
 
      <input type="radio" name="genderS" id="female" value="female" />FeMale 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td>Address:</td> 
 
     <td> 
 
      <input type="textarea" id="address"> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td>Email:</td> 
 
     <td> 
 
      <input type="email" id="mail" name="Email"> 
 
     </td> 
 
     </tr> 
 
     &nbsp; 
 
     <tr> 
 
     <td> 
 
      <input type="button" id="add" value="Add" onclick="javascript:addRow()"> 
 
     </td> 
 
     <td> 
 
      <input type="reset" value="Reset" id="reset" /> 
 
     </td> 
 
     <td> 
 
      <input type="button" id="update" value="Update" onClick="javascript:updateRow()"> 
 
     </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 colspan=2><b>Action</b> 
 
     </td> 
 
    </tr> 
 
    </table> 
 
</div>

Quelle

2016-06-22 06:38:56

0

über Probieren Sie es hier, wie ich betrachten würde gehen. Beachten Sie, dass Sie bei der Eingabe etwas weniger sparen können, wenn Sie Hilfsfunktionen verwenden, und ein wenig mehr, wenn Sie möglichst Schleifen verwenden. Ich werde auch darauf hinweisen, dass das form Element hat ein Javascript mehod, reset - Aufruf wird alle Steuerelemente in dem Formular zurückgesetzt.

Anstatt das Textattribut onclick zu setzen, habe ich auch Handler an das js-Ereignis 'click' angehängt. Dies ermöglicht es uns, sie zu entfernen und anzubringen, wie es uns gefällt. In diesem Fall werden der Text und die Funktion der Schaltfläche "BEARBEITEN" nach einem Klick geändert, sodass "FERTIG" angezeigt wird. Anschließend wird der Text aus den Eingabeelementen übernommen und erneut auf die Tabellenzellen angewendet.

Die Bearbeitungsfunktion wird einfach dadurch erreicht, dass innerHTML der ersten 5 Zellen in einer Zeile genommen wird und durch eine Eingabe ersetzt wird, deren Wert das alte innerHTML ist.

<!DOCTYPE html> 
<html> 
<head> 
<script> 
"use strict"; 
function byId(id){return document.getElementById(id);} 
function newEl(tag){return document.createElement(tag);} 
function addRow() 
{ 
    var table = byId('myTableData'); 
    var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount); 

    row.insertCell(0).innerHTML = byId('empId').value; 
    row.insertCell(1).innerHTML = byId('name').value; 
    row.insertCell(2).innerHTML = byId('gender').value; 
    row.insertCell(3).innerHTML = byId('address').value; 
    row.insertCell(4).innerHTML = byId('mail').value 
    row.insertCell(5).innerHTML = '<input type="button" value = "Delete" onClick="deleteRow(this)"/>'; 

    var editBtn = newEl('button'); 
    editBtn.textContent = 'Edit'; 
    editBtn.addEventListener('click', beginEditRow, false); 
    row.insertCell(6).appendChild(editBtn); 

    byId('myform').reset(); 
} 

function beginEditRow(evt) 
{ 
    var clickedButton = this; 
    var rowElem = clickedButton.parentNode.parentNode; 

    var maxCells = 5; 
    for (var i=0; i<maxCells; i++) 
    { 
     var tmpStr = rowElem.cells[i].innerHTML; 
     var tmpInput = newEl('input'); 
     tmpInput.value = tmpStr; 
     rowElem.cells[i].innerHTML = ''; 
     rowElem.cells[i].appendChild(tmpInput); 
    } 

    this.textContent = "-Done-"; 
    this.removeEventListener('click', beginEditRow); 
    this.addEventListener('click', endEditRow, false); 
} 

function endEditRow(evt) 
{ 
    var clickedBtn = this; 
    var rowElem = clickedBtn.parentNode.parentNode; 

    var maxCells = 5; 
    for (var i=0; i<maxCells; i++) 
    { 
     var tmpStr = rowElem.cells[i].childNodes[0].value; 
     rowElem.cells[i].innerHTML = tmpStr; 
    } 
    this.textContent = "Edit"; 
    this.removeEventListener('click', endEditRow); 
    this.addEventListener('click', beginEditRow, false); 
} 

function deleteRow(obj) 
{ 
    var index = obj.parentNode.parentNode.rowIndex; 
    var table = byId("myTableData"); 
    table.deleteRow(index); 
} 
</script> 
<style> 
</style> 
</head> 
<body> 
    <div> 
     <b>Employee Information</b> 
     <form id="myform" method="post" action="">  
      <table>  
       <tr><th>ID:</th><td><input type="text" id="empId"></td></tr> 
       <tr><th>Name:</th><td><input type="text" id="name"></td></tr> 
       <tr><th>Gender:</th><td><input type="radio" id="gender" value="male"/>Male<br><input type="radio" id="gender" value="Female" />Female</td></tr> 
       <tr><th>Address:</th><td><input type="textarea" id="address"></td></tr> 
       <tr><th>Email:</th><td><input type="email" id="mail" name="Email"></td></tr> 
       <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> 
      </table> 
     </form> 
    </div> 
    <hr> 
    <div id="mydata"> 
     <table id="myTableData" border="1" cellpadding="2"> 
     <tr><th>ID</th><th>Name</th><th>Gender</th><th>Address</th><th>Email</th><th>Action</th></tr> 
     </table> 
    </div> 
</body> 
</html>

Quelle

2016-06-22 09:11:42 enhzflep

Verwandte Themen

 Verwandte Themen