Javascript 如何使用java脚本从表数据填充表单输入字段？
我试图从表数据的字段中填充，但我真的不知道该怎么做。我是Java脚本的新手。请帮我解决这个问题。下面是我的代码快照，它显示了通过js添加和删除记录的功能。提前谢谢Javascript 如何使用java脚本从表数据填充表单输入字段？,javascript,html,css,dynamic,populate,Javascript,Html,Css,Dynamic,Populate,我试图从表数据的字段中填充，但我真的不知道该怎么做。我是Java脚本的新手。请帮我解决这个问题。下面是我的代码快照，它显示了通过js添加和删除记录的功能。提前谢谢 <html> <head> <link type="text/css" rel="stylesheet" href="css/bootstrap-theme.css"> <link type="text/css" rel="stylesheet" href="css/boots
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.css">
<link type="text/css" rel="stylesheet" href="css/bootstrap.css">
<link type="text/css" rel="stylesheet" href="css/bootstrap-theme.min.css">
<link type="text/css" rel="stylesheet" href="fonts/glyphicons-halflings-regular.eot">
<link type="text/css" rel="stylesheet" href="js/bootstrap.js">
<link type="text/css" rel="stylesheet" href="js/bootstrap.min.js">
<script>
localStorage.setVisit = "";
function first_visit(){
if(typeof (localStorage.setVisit) == "undefined" || localStorage.setVisit == ""){
localStorage.setVisit = "Yes";
document.getElementById("up_btn").disabled = true;
document.getElementById("add_btn").disabled = false;
}
}
function add_data(){
var name_tb = document.getElementById("name").value;
if(document.getElementById("Male").checked){
var gender = document.getElementById("Male").value;
}else if(document.getElementById("Female").checked){
gender = document.getElementById("Female").value;
}else{
gender = "";
}
var age_tb = document.getElementById("age").value;
var city = document.getElementById("city");
var city_selected = city.options[city.selectedIndex].value;
var table = document.getElementById("table_person");
var row = table.insertRow(-1);
var par1 = row.insertCell(0);
var par2 = row.insertCell(1);
var par3 = row.insertCell(2);
var par4 = row.insertCell(3);
var par5 = row.insertCell(4);
var par6 = row.insertCell(5);
par1.innerHTML = name_tb;
par2.innerHTML = gender;
par3.innerHTML = age_tb;
par4.innerHTML = city_selected;
par5.innerHTML = '<a href="#" onclick="update_rec();">Update</a>';
par6.innerHTML = '<a href="#" onclick="delete_rec(this)">Delete</a>';
document.getElementById("up_btn").disabled = false;
document.getElementById("add_btn").disabled = false;
}
function delete_rec(record){
var del = record.parentNode.parentNode;
del.parentNode.removeChild(del);
document.getElementById("add_btn").disabled = false;
}
function update_rec(record){
document.getElementById("up_btn").disabled = false;
document.getElementById("add_btn").disabled = true;
}
</script>
</head>
<body onload="first_visit()">
<div class="container">
<div class="row" style="margin-top:2%;">
<div class="col-lg-8">
<h3>List of Persons</h3>
<table class="table table-striped" id="table_person" style="border: 2px solid black;">
<tr>
<th>Name</th>
<th>Gender</th>
<th>Age</th>
<th>City</th>
<th class="text-right">Action</th>
<th></th>
</tr>
</table>
</div>
<div class="col-lg-4">
<h3>Add / Update Person Form</h3>
<div style="border: 2px solid darkgrey; height: 55%;">
<form class="form-horizontal" style="margin-top: 8%;">
<div class="form-group">
<label class="control-label col-lg-3">Name:</label>
<div class="col-lg-8">
<input id="name" type="text" name="name" class="form-control" placeholder="Name"
style="border: 2px solid black;">
</div>
</div>
<div class="form-group" style="padding-top: 2%;">
<label class="control-label col-lg-3">Gender:</label>
<div class="col-lg-8" style="margin-top: 2%;">
<input type="radio" name="gender" value="Male" id="Male">Male
<input type="radio" name="gender" value="Female" id="Female">Female
</div>
</div>
<div class="form-group" style="padding-top: 2%;">
<label class="control-label col-lg-3">Age:</label>
<div class="col-lg-8">
<input id= "age" type="text" name="age" class="form-control" placeholder="Age"
style="border: 2px solid black;">
</div>
</div>
<div class="form-group" style="padding-top: 3%;">
<label class="control-label col-lg-3">City:</label>
<div class="col-lg-8">
<select id = "city" class="col-lg-12" style="margin-top: 1%; height: 10%; border: 2px solid black;">
<option>Lahore</option>
<option>Karachi</option>
<option>Islamabad</option>
<option>Faisalabad</option>
<option>Multan</option>
</select>
</div>
</div>
<div class="form-group" style="padding-top: 3%;">
<div class="col-lg-offset-2">
<input type="reset" class="btn btn-default" value="Reset"
style="border:2px solid black;padding:1% 8% 1% 8%;">
<input type="button" id="add_btn" onclick="add_data()" class="btn btn-default" value="Add"
style="border: 2px solid black;padding:1% 8% 1% 8%;">
<input type="button" id="up_btn" class="btn btn-default" value="Update"
style="border: 2px solid black;padding:1% 8% 1% 8%;">
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
localStorage.setVisit=“”；
功能首次访问（）{
if（typeof（localStorage.setVisit）=“未定义”| | localStorage.setVisit==”）{
localStorage.setVisit=“是”；
document.getElementById（“up_btn”）.disabled=true；
document.getElementById（“add_btn”）.disabled=false；
}
}
函数add_data（）{
var name_tb=document.getElementById（“name”）.value；
if（document.getElementById（“Male”）.选中）{
var gender=document.getElementById（“男性”）.value；
}else if（document.getElementById（“女性”）.选中）{
性别=document.getElementById（“女性”）.value；
}否则{
性别=”；
}
var age_tb=document.getElementById（“age”）.value；
var city=document.getElementById（“城市”）；
var city\u selected=city.options[city.selectedIndex].value；
var table=document.getElementById（“表_person”）；
var行=table.insertRow（-1）；
var par1=行插入单元格（0）；
var par2=行插入单元格（1）；
var par3=行插入单元格（2）；
var par4=行插入单元格（3）；
var par5=行插入单元格（4）；
var par6=行插入单元格（5）；
par1.innerHTML=name\u tb；
par2.innerHTML=性别；
par3.innerHTML=age_tb；
par4.innerHTML=所选城市；
par5.innerHTML=''；
par6.innerHTML=''；
document.getElementById（“up_btn”）.disabled=false；
document.getElementById（“add_btn”）.disabled=false；
}
功能删除记录（记录）{
var del=record.parentNode.parentNode；
del.parentNode.removeChild（del）；
document.getElementById（“add_btn”）.disabled=false；
}
功能更新记录（记录）{
document.getElementById（“up_btn”）.disabled=false；
document.getElementById（“add_btn”）.disabled=true；
}
人员名单
名称
性别
年龄
城市
行动
添加/更新个人表格
姓名：
性别：
男性
女性
年龄：
城市：
拉合尔
卡拉奇
伊斯兰堡
费萨拉巴德
木尔坦