如何启用编辑选项在这个JavaScript程序 [英] How to Enable Edit option in this javascript program

查看：71
本文介绍了如何启用编辑选项在这个JavaScript程序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个JavaScript程序用于从表创建 AddRow（）， reset（）， DeleteRow（）函数，但我无法在此程序中创建 EditRow 。

I've a JavaScript program to add records from a Form to Table i created AddRow(),reset(),DeleteRow() functions in this program but I am unable to create the EditRow()function in this program.

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>

推荐答案

使用这样...
我使用隐藏的输入类型来更新数据和编辑和更新功能。

Use like this... I used input type hidden to update data and edit and update function . 

<!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>
	<input type="hidden" id="updateid" value="">
	<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){	
	var gender="Male";
}else if(document.getElementById('female').checked) {
	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"){
	document.getElementById("male").checked = true;
}else{
	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");	
var updateid= document.getElementById("updateid");
var table = document.getElementById("myTableData");

if(document.getElementById("male").checked){
	gender="Male";
}else{
	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>

这篇关于如何启用编辑选项在这个JavaScript程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆