我正在尝试从表格数据中填充字段，但我真的不知道该怎么做。我是Java脚本的新手。请帮我解决这个问题。这是我的代码快照，它显示了通过js添加和删除记录功能。提前谢谢！
<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>