1
我最近开始学习基因敲除。我被赋予了一项任务，要求我从.txt文件中获取JSON，然后使用淘汰赛制作表格。该表也应该是可编辑的（添加，删除和编辑行）。我设法做了一切，但编辑部分。如果你们能帮助我，我将不胜感激。基因敲除编辑表元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="styles/jquery-ui.min.css">
<script type="text/javascript" src="scripts/libs/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="scripts/libs/knockout-3.4.0.js"></script>
<script type="text/javascript" src="scripts/libs/jquery-ui.min.js"></script>
<script type="text/javascript" src="scripts/libs/jquery.shorten.1.0.js"></script>
</head>
<body>
<div id="wrapper">
<table>
<thead>
<tr><th>Num</th><th>isActive</th><th>Balance</th><th>Age</th><th>Eye Color</th><th>First name</th><th>Last name</th><th>Tags</th><th>Total</th><th>Company</th><th>email</th><th>phone</th><th>address</th><th>about</th><th>registered</th><th>greeting</th><th>favoriteFruit</th></tr>
</thead>
<tbody data-bind="foreach: People">
<tr>
<td> <span data-bind="text: $index"> </span></td>
<td><input class="checkbox" type="checkbox" data-bind="checked: isActive" /></td>
<td ><span class="balanceRes" data-bind="text: $data.balance"></span></td>
<td ><input class="balanceEdit" type="text" data-bind="value: $data.balance" /></td>
<td data-bind="text: age"></td>
<td data-bind="text: eyeColor"></td>
<td data-bind="text: name.first"></td>
<td data-bind="text: name.last"></td>
<td><select data-bind="options: tags"></select></td>
<td data-bind="text: range"></td>
<td data-bind="text: company"></td>
<td data-bind="text: email"></td>
<td data-bind="text: phone"></td>
<td data-bind="text: address"></td>
<td class="about" data-bind="text: about"></td>
<td class="date" name=data data-bind="text: registered"></td>
<td data-bind="text: greeting"></td>
<td data-bind="text: favoriteFruit"></td>
<td><input type="button" value="remove" data-bind="click:$parent.removePerson" /></td>
<td><input type="button" value="edit" data-bind="click:$parent.editPerson" /></td>
</tr>
</tbody>
</table>
Balance <input id="balance-add" type="text">
Age <input id="age-add" type="text">
Eye Color <input id="eyeColor-add" type="text">
First Name <input id="firstName-add" type="text">
Last Name <input id="lastName-add" type="text">
Tags <input id="tags-add" type="text">
Total <input id="total-add" type="text">
Company <input id="company-add" type="text">
Email <input id="email-add" type="text">
Phone <input id="phone-add" type="text">
Address <input id="address-add" type="text">
About <input id="about-add" type="text">
Registered <input type="text" name="date" id="date-add"/>
Greeting <input id="greeting-add" type="text">
Favorite Fruit <input id="fruit-add" type="text">
</div>
<br/>
<button data-bind="click: addPerson">Add</button>
<script src="scripts/app.js"></script>
</body>
</html>
$(document).ready(function() {
let dataText;
$.ajax({
url : "scripts/data.txt",
dataType: "text",
success : function (data) {
dataText=data;
var objJs=JSON.parse(dataText);
var count = Object.keys(objJs).length;
var sum=0;
for(let i=0;i<count;i++){
let ranges=objJs[i].range.length;
for(let j=0;j<ranges;j++){
sum+=objJs[i].range[j];
}
objJs[i].range=sum;
sum=0;
}
ko.applyBindings(new AppViewModel(objJs));
createTable();
}
})});
function createTable() {
$('#date-add').datepicker({ minDate: 0});
$('.about').shorten({
"showChars" : 50
});}
function AppViewModel(data) {
let self=this;
self.People=ko.observableArray(data);
self.addPerson=function() {
self.People.push({isActive:false, balance:$('#balance-add').val(),age:$('#age-add').val(),eyeColor: $('#eyeColor-add').val(),
name:{first:$('#firstName-add').val(),last:$('#lastName-add').val()}, tags:$('#tags-add').val().split(","),
range:$('#total-add').val(),company:$('#company-add').val(),email:$('#email-add').val(),email:$('#email-add').val(),
phone:$('#phone-add').val(),address:$('#address-add').val(),address:$('#address-add').val(),about:$('#about-add').val(),
registered:$('#date-add').val(),greeting:$('#greeting-add').val(),favoriteFruit:$('#fruit-add').val()})}
self.removePerson=function (people) {
self.People.remove(people);
}
self.editPerson=function (people) {
}}
我目前试图让这个被按下的编辑按钮时，其余值跨度会从输入更新旁边的后援问题是，我不知道该怎么办self.editPerson =函数（人）正常工作。 我尝试过this.People.balance（index.balance）; - （Uncaught TypeError：无法读取未定义的属性'balance'）或self.People（）[people.index] .balance = people.balance; - （没有结果或错误） 我试过的其他事情都没有成功。 在调试期间，我看到self.People（）[people.index] .balance已经在编辑按钮单击事件之后随输入字段的值而改变，但它不会显示在表中。 任何想法如何我可以在表中显示它？
这里是一些在txt文件的内容：
[{
"_id": "5608ef7db3723785000cc555",
"index": 0,
"guid": "fc4c666f-3da1-4627-899b-a79fea0901cd",
"isActive": false,
"balance": "$3,288.11",
"age": 22,
"eyeColor": "brown",
"name": {
"first": "Brandie",
"last": "Mathis"
},
"company": "XEREX",
"email": "[email protected]",
"phone": "+1 (975) 575-2608",
"address": "728 Colonial Road, Neibert, South Dakota, 7145",
"about": "Ad pariatur aute adipisicing magna enim nulla laboris. Sunt officia consequat elit fugiat ipsum sint aliquip sit irure sunt quis laboris. Labore elit consectetur excepteur ex in velit quis mollit excepteur aute nostrud cupidatat sint. Veniam labore incididunt exercitation mollit veniam et consequat mollit dolore do. Laboris ad proident et culpa irure et ullamco qui fugiat labore ex voluptate culpa. Laboris nisi sunt magna et.",
"registered": "Tuesday, August 5, 2014 3:53 PM",
"tags": [
"deserunt",
"do",
"sint",
"proident",
"nulla",
"Lorem",
"esse",
"custom_tag"
],
"range": [
1,
3,
3,
4,
5,
7,
8
],
"greeting": "Hello, Brandie! You have 7 unread messages.",
"favoriteFruit": "strawberry"
},
{
"_id": "5608ef7d5503c0da99a874ae",
"index": 1,
"guid": "5ca9f2f0-a2bf-4ba5-be84-40df2020c7e6",
"isActive": false,
"balance": "$2,205.31",
"age": 20,
"eyeColor": "brown",
"name": {
"first": "Celia",
"last": "Hopper"
},
"company": "QUANTALIA",
"email": "[email protected]",
"phone": "+1 (899) 588-2155",
"address": "488 Monaco Place, Abrams, Oklahoma, 4175",
"about": "Magna ut cillum nisi ipsum tempor aute. Mollit exercitation voluptate cillum anim sit laborum qui ullamco occaecat culpa in. Consequat eu qui sint exercitation magna ea proident excepteur ullamco velit nisi. Ullamco ullamco anim cillum Lorem ea mollit do minim. Ad nisi dolor consectetur anim nisi ex ea elit ullamco nostrud nisi id.",
"registered": "Saturday, January 3, 2015 10:56 PM",
"tags": [
"deserunt",
"do",
"sint",
"proident",
"nulla",
"Lorem",
"esse",
"custom_tag"
],
"range": [
0,
1,
3,
4,
6,
7,
9
],
"greeting": "Hello, Celia! You have 6 unread messages.",
"favoriteFruit": "strawberry"
}]