使用javascript填充表格行数据 [英] Fill form with table row data using javascript
本文介绍了使用javascript填充表格行数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我无法用表格数据填充表单。表单处于模态对话框，我希望对话框在用户点击字形，字形铅笔时弹出输入。
我已经看过填写表格表格数据，如何在表格中填写输入字段与来自html表格中的行的数据我想编辑， jQuery动态使用表格数据填充表单字段，自动使用JavaScript和JSON填充表的数据，并没有他们的解决方案为我工作，所以请帮助。
这里是模态和表单代码：
< div class =modal fadeid =New- Employee-Modaltabindex = - 1role =dialogaria-labelledby =myModalLabelaria-hidden =true>
< div class =modal-dialog>
< div class =modal-content>
< div class =modal-header>
< button type =buttonclass =closedata-dismiss =modalaria-label =Close>< span aria-hidden =true>& times;<<< ; /跨度>< /按钮>
< h4 class =modal-titleid =myModalLabel>员工< / h4>
< / div>
< div class =modal-body>
< div id =data>
< form id =person>
< div class =form-group>
< label class =control-label>名字：< / label>
< input class =form-controlid =FirstNamename =FirstNametype =text>
< / div>
< div class =form-group>
< label class =control-label>姓氏：< / label>
< input class =form-controlid =LastNamename =LastNametype =text>
< / div>
< div class =form-group>
< label class =control-label> Net Id：< / label>
< input class =form-controlid =NetIdname =Netidtype =text>
< / div>
< div class =form-group>
< label class =control-label>电话号码：< / label>
< input class =form-controlid =PhoneNumbername =PhoneNumbertype =telrequired />
< / div>
< div class =form-group>
< label class =control-label>电子邮件地址：< / label>
< input class =form-controlid =Emailname =Emailtype =text>
< / div>
< div class =form-group>
< label class =control-label>角色< / label>
< input class =form-controlid =Rolename =Roletype =text>
< / div>
< div class =form-group>
< label class =control-label> Active：< / label>
< br />
< input name =Activetype =radiovalue ='< span class =glyphicon glyphicon-ok-circle>'/>活动
< br />
< input name =Activetype =radiovalue ='< span class =glyphicon glyphicon-ban-circle>'/>未激活
< / div>
< / form>
< / div>
< div class =modal-footer>
< button type =buttonclass =btn btn-defaultonclick =ResetForm（）>重置< / button>
< button type =buttonclass =btn btn-defaultdata-dismiss =modal>关闭< / button>
< button type =buttonclass =btn btn-primarydata-dismiss =modalonclick =AddData（）>保存< / button>
< / div>
< / div>
< / div>
< / div>
以下是表格的部分内容：
< div id =tab>
< table class =table table-stripedid =list>
< thead>
< tr>
< th>名字< / th>
< th>姓氏< / th>
< th> Net ID< / th>
th Phone＃< / th>
< th>电子邮件< / th>
< th> Active< / th>
< th>角色< / th>
< th>动作< / th>
< / tr>
< / thead>
< tbody>
< tr>
< td> Joel< / td>
< td>刘易斯< / td>
< td> lewisj< / td>
< td> 333-555-3667< / td>
< td> lewisj@gmail.com< / td>
< td>
< span class =glyphicon glyphicon-ok-circlearia-hidden =true>< / span>
< / a>
< / td>
< td>开发人员< / td>
< td>
< span class =glyphicon glyphicon-pencildata-target =＃New-Employee-Modalonclick =UpdateForm（）aria-hidden =true>< / span>
< a id =icon-toggle-deleteclass =removebutton>
< / a>
< / td>
< / tr>
这里是javascript：
函数AddData（）{
var rows =;
var FirstName = document.getElementById（FirstName）.value;
var LastName = document.getElementById（LastName）.value;
var NetId = document.getElementById（NetId）.value;
var PhoneNumber = document.getElementById（PhoneNumber）.value.replace（/（\d {3}）（\d {3}）（\d {4}）/，'$ 1- $ $ 2- 3' ）;
var Email = document.getElementById（Email）.value;
var Active = document.querySelector（'input [name =Active]：checked'）;
有效=有效？ Active.value：'';
var Role = document.getElementById（Role）.value;
rows + =< td> + FirstName +< / td>< td> + LastName +< / td>< td> + NetId +< / td>< td> + PhoneNumber +< / td>< td> +电子邮件+< / td>< td> + Active +< / td>< td> +角色+'< / td>< td> < span class =glyphicon glyphicon-pencilaria-hidden =true>< / span> < a id =icon-toggle-delete2class =removebutton> < span class =glyphicon glyphicon-removearia-hidden =true>< / span> < / A>< / TD>;
var tbody = document.querySelector（＃list tbody）;
var tr = document.createElement（tr）;
tr.innerHTML =行;
tbody.appendChild（tr）
}
函数UpdateForm（）{
$（'span.glyphicon glyphicon-pencil' ）.click（function（）{
//！不知道这里有什么
}）;
$ b函数ResetForm（）{
document.getElementById（person）。reset（）;
}
这里是jsfiddle http://jsfiddle.net/neu4gh37/2/
解决方案
您可以使用这样的代码示例。请注意，您不需要使用 onclick 事件调用 UpdateForm（），您通过jQuery为选择器添加了此事件'span.glyphicon-pencil'（我修好了）
$（'span.glyphicon-pencil'）。click （function（）{
var formFields = [];
var $ target = $（event.target）;
var $ row = $ target.closest（'tr'）;
$ row.find（'td'）。each（function（index，el）{
var fieldValue = $（el）.html（）;
switch（index）{
案例0：
formFields ['FirstName'] = fieldValue;
break;
案例1：
formFields ['LastName'] = fieldValue;
break;
default：
break;
}
}）;
fillForm（formFields）;
}）;
函数fillForm（data）{
var $ form = $（'＃person'）;
$ form.find（'input'）。each（function（）{
var $ input = $（this）;
switch（$ input.attr（name））{
case'FirstName'：
$ input.val（data ['FirstName']）;
break;
case'LastName'：
$ input.val data ['LastName']）;
break;
default：
break;
}）;
}
I am having trouble filling a form with table data.The form is in a modal dialogue and I want the dialogue to popup with inputs filled when the user clicks on the glyphicon, glyphicon-pencil.
I have looked at Fill form using table data, How to fill input fields in form with data from row in html table I want to edit, jQuery dynamic fill in form fields with table data, and Automatic fill a table with data using JavaScript and JSON, and none of their solutions worked for me, so please help. here is the modal and form code:
<div class="modal fade" id="New-Employee-Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Employee</h4>
</div>
<div class="modal-body">
<div id="data">
<form id="person">
<div class="form-group">
<label class="control-label">First Name:</label>
<input class="form-control" id="FirstName" name="FirstName" type="text">
</div>
<div class="form-group">
<label class="control-label">Last Name:</label>
<input class="form-control" id="LastName" name="LastName" type="text">
</div>
<div class="form-group">
<label class="control-label">Net Id:</label>
<input class="form-control" id="NetId" name="Netid" type="text">
</div>
<div class="form-group">
<label class="control-label">Phone #:</label>
<input class="form-control" id="PhoneNumber" name="PhoneNumber" type="tel" required />
</div>
<div class="form-group">
<label class="control-label">Email:</label>
<input class="form-control" id="Email" name="Email" type="text">
</div>
<div class="form-group">
<label class="control-label">Role</label>
<input class="form-control" id="Role" name="Role" type="text">
</div>
<div class="form-group">
<label class="control-label">Active:</label>
<br />
<input name="Active" type="radio" value='<span class="glyphicon glyphicon-ok-circle">' /> Active
<br />
<input name="Active" type="radio" value='<span class="glyphicon glyphicon-ban-circle">' /> Not Active
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" onclick="ResetForm()">Reset</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-dismiss="modal" onclick="AddData()">Save</button>
</div>
</div>
</div>
</div>
Here is the part of the table:
<div id="tab">
<table class="table table-striped" id="list">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Net ID</th>
<th>Phone #</th>
<th>Email</th>
<th>Active</th>
<th>Role</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>Joel</td>
<td>lewis</td>
<td>lewisj</td>
<td>333-555-3667</td>
<td>lewisj@gmail.com</td>
<td>
<a id="icon-toggle" class="btn-default">
<span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span>
</a>
</td>
<td>Developer</td>
<td>
<span class="glyphicon glyphicon-pencil" data-target="#New-Employee-Modal" onclick="UpdateForm()" aria-hidden="true"></span>
<a id="icon-toggle-delete" class="removebutton">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
</a>
</td>
</tr>
and here is the javascript:
function AddData() {
var rows = "";
var FirstName = document.getElementById("FirstName").value;
var LastName = document.getElementById("LastName").value;
var NetId = document.getElementById("NetId").value;
var PhoneNumber = document.getElementById("PhoneNumber").value.replace(/(\d{3})(\d{3})(\d{4})/, '$1-$2-$3');
var Email = document.getElementById("Email").value;
var Active = document.querySelector('input[name="Active"]:checked');
Active = Active ? Active.value : '';
var Role = document.getElementById("Role").value;
rows += "<td>" + FirstName + "</td><td>" + LastName + "</td><td>" + NetId + "</td><td>" + PhoneNumber + "</td><td>" + Email + "</td><td>" + Active + "</td><td>" + Role + '</td><td> <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> <a id="icon-toggle-delete2" class="removebutton"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></span> </a></td>';
var tbody = document.querySelector("#list tbody");
var tr = document.createElement("tr");
tr.innerHTML = rows;
tbody.appendChild(tr)
}
function UpdateForm() {
$('span.glyphicon glyphicon-pencil').click(function() {
//! Don't know what do here
});
}
function ResetForm() {
document.getElementById("person").reset();
}
here is the jsfiddle http://jsfiddle.net/neu4gh37/2/
解决方案
You can use such an example of code. Note, you don't need call UpdateForm() with onclick event, you added this event by jQuery for the selector 'span.glyphicon-pencil' (I fixed it a little)
$('span.glyphicon-pencil').click(function () {
var formFields = [];
var $target = $(event.target);
var $row = $target.closest('tr');
$row.find('td').each(function (index, el) {
var fieldValue = $(el).html();
switch (index) {
case 0:
formFields['FirstName'] = fieldValue;
break;
case 1:
formFields['LastName'] = fieldValue;
break;
default:
break;
}
});
fillForm(formFields);
});
function fillForm(data) {
var $form = $('#person');
$form.find('input').each(function () {
var $input = $(this);
switch ($input.attr("name")) {
case 'FirstName':
$input.val(data['FirstName']);
break;
case 'LastName':
$input.val(data['LastName']);
break;
default:
break;
}
});
}
这篇关于使用javascript填充表格行数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
