var mainData = [];
getData();
function getData() {
var data = JSON.parse(localStorage.getItem('user'));
var html = "";
for (var i = 0; i < data.length; i++){
html +="<tr>"+
"<td>"+ (i+1) + "</td>"+
"<td>"+ data[i].name + "</td>"+
"<td>"+ data[i].number + "</td>"+
"<td>"+ data[i].city + "</td>"+
"<td>"+ data[i].hobby + "</td>"+
"<td>"+ data[i].birthdate + "</td>"+"<td><button data-arrayIndex='"+ i +"' onclick='editData(this)'>Edit</button><button data-arrayIndex='"+ i +"' onclick='deleteData()'>Delete</button></td>"+"</tr>";
}
$("#tableHtml").html(html);
}
function deleteData(thisEle){
var arrayIndex = $(thisEle).attr("data-arrayIndex");
console.log(arrayIndex);
}
function editData(thisEle){
var arrayIndex = $(thisEle).attr("data-arrayIndex");
var data = JSON.parse(localStorage.getItem('user'));
var name = data[arrayIndex]['name'];
var number = data[arrayIndex]['number'];
var city = data[arrayIndex]['city'];
var hobby = data[arrayIndex]['hobby'];
var birthdate = data[arrayIndex]['birthdate'];
$("#hiddenele").val(arrayIndex);
$("#name").val(name);
$("#number").val(number);
$("#city").val(city);
$("#birthdate").val(birthdate);
$('#addValue').css('display', 'none');
$('#updateValue').css('display', 'block');
var hobby ;
$(document).ready(function(){
var d = data[arrayIndex].hobby;
if(d == 'cricket, chess, hockey'){
$('.hobby').prop('checked', true);
}else if(d == 'cricket, chess'){
$('.hobby').prop('checked', false);
$('#cricket').prop('checked', true);
$('#chess').prop('checked', true);
}else if(d == 'chess, hockey'){
$('.hobby').prop('checked', false);
$('#hockey').prop('checked', true);
$('#chess').prop('checked', true);
}else if(d == 'cricket, hockey'){
$('.hobby').prop('checked', false);
$('#hockey').prop('checked', true);
$('#cricket').prop('checked', true);
}else if(d == 'cricket'){
$('.hobby').prop('checked', false);
$('#cricket').prop('checked', true);
}else if(d == 'chess'){
$('.hobby').prop('checked', false);
$('#chess').prop('checked', true);
}else if(d == 'hockey'){
$('.hobby').prop('checked', false);
$('#hockey').prop('checked', true);
} else {
console.log('data not valid');
}
});
}
function updateData(){
var arrayIndex = $("#hiddenele").val();
console.log(arrayIndex);
var name = $("#name").val();
var number = $("#number").val();
var hobby ;
$(document).ready(function(){
var a =[];
$.each($("input[name='sport']:checked"), function(){
a.push($(this).val());
});
hobby = a.join(", ");
});
var city = $("#city").val();
var birthdate = $("#birthdate").val();
if(name == '' || number == '' || city == '' || birthdate == '' || hobby == ''){
alert ('Enter Valid Credentials');
return false;
} else {
var contacts = {
'name' : name,
'number' :number,
'city' : city,
'hobby' : hobby,
'birthdate' : birthdate
}
var d = [];
d.push(contacts);
var a = localStorage.setItem('user', JSON.stringify(d[arrayIndex]));
console.log(d);
getData();
}
}
function addData(){
var name = $("#name").val();
var number = $("#number").val();
var hobby ;
$(document).ready(function(){
var a =[];
$.each($("input[name='sport']:checked"), function(){
a.push($(this).val());
});
hobby = a.join(", ");
});
var city = $("#city").val();
var birthdate = $("#birthdate").val();
if(name == '' || number == '' || city == '' || birthdate == '' || hobby == ''){
alert ('Enter Valid Credentials');
return false;
} else {
var contacts = {
'name' : name,
'number' :number,
'city' : city,
'hobby' : hobby,
'birthdate' : birthdate
}
mainData.push(contacts);
var a = localStorage.setItem('user', JSON.stringify(mainData));
var obj = JSON.parse(localStorage.user);
console.log(obj);
getData();
}
}; <title>CRUD App</title>
<script src="jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link rel=stylesheet href="style.css">
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<!-- <input type="button" id="addNew" value ="Add new Entry"> -->
<div class="container-fluid pull-left" style="width:25%;">
<form name="myForm" action="" >
<br>
<legend>Add New Number</legend><br>
<label for="name"></label>
<input type="text" name="name" id="name" placeholder="Name Please">
<br>
<label for="number"></label>
<input type="number" name="number" id="number" maxlength="10" placeholder="Mobile Number">
<br>
<label for="city"></label>
<select id = "city" name = "city">
<option value="" disabled selected>Please Select</option>
<option value="Ahmedabad">Ahmedabad</option>
<option value="rajkot">rajkot</option>
<option value="surat">Surat</option>
</select>
<br>
<div id="checkbox">
<label for="hobby">Hobby:</label><br>
<input type="checkbox" class="hobby" name="sport" value="cricket" id="cricket">Cricket <br>
<input type="checkbox" class="hobby" name="sport" value="chess" id="chess">Chess <br>
<input type="checkbox" class="hobby" name="sport" value="hockey" id="hockey">Hockey <br>
</div><br>
<label for="birthday"></label>
<input type="date" id="birthdate" name="birtdate" placeholder=""><br>
<!-- submit And Reset --><br>
<input class="btn btn-default" id = "addValue" type="button" value = "Add" onclick = "addData()" style="display: block;">
<input class="btn btn-default" id = "updateValue" type="button" value = "update" onclick = "updateData()" style="display: none;">
<input class="btn btn-default" type="reset" value="reset">
<input type="hidden" id="hiddenele" val="">
</form>
</div>
<br>
<br>
<div class="table-responsive" style="width: 70%">
<legend>List Of Persons</legend>
<div id = "tab">
<table>
<tr>
<td>ID</td>
<td>Name</td>
<td>Number</td>
<td>city</td>
<td>hobby</td>
<td>birthdate</td>
<td>actions</td>
</tr>
<tbody id="tableHtml" onload="getData()">
</tbody>
</table>
</div>
<!-- <script src="validate.min.js"></script> -->
<!-- <script src="validate.js"></script> -->
<script type="text/javascript" src="script.js"></script>
var a = JSON.parse(localStorage.getItem('用户')) 不明确的 A (7)【对象、对象、对象、对象、对象、对象、对象】
"[{"名称":"kv",
"号码":"65464564",
"city":"艾哈迈达巴德",
"爱好":"板球、国际象棋、曲棍球",
“生日”:“2019-02-02”
},
{
“名称”:“kv”，
"号码":"65464564",
"city":"艾哈迈达巴德",
"爱好":"板球、国际象棋、曲棍球",
“生日”:“2019-02-02”
},
{
“名称”:“kv”，
"号码":"65464564",
"city":"艾哈迈达巴德",
"爱好":"板球、国际象棋、曲棍球",
“生日”:“2019-02-02”
},
{
“名称”:“kv”，
"号码":"65464564",
"city":"艾哈迈达巴德",
"爱好":"板球、国际象棋、曲棍球",
“生日”:“2019-02-02”
},
{
“名称”:“kv”，
"号码":"65464564",
"city":"艾哈迈达巴德",
"爱好":"板球、国际象棋、曲棍球",
“生日”:“2019-02-02”
},
{
“名称”:“kv”，
"号码":"65464564",
"city":"艾哈迈达巴德",
"爱好":"板球、国际象棋、曲棍球",
“生日”:“2019-02-02”
},
{
“名称”:“kv”，
"号码":"65464564",
"city":"艾哈迈达巴德",
"爱好":"板球、国际象棋、曲棍球",
“生日”:“2019-02-02”
}
]"
最佳答案
b[arrayIndex]["name"] = name;
b[arrayIndex]["number"] = number;
b[arrayIndex]["city"] = city;
b[arrayIndex]["hobby"] = hobby;
b[arrayIndex]["birthdate"] = birthdate;
var a = localStorage.setItem('user', JSON.stringify(b));
关于javascript - 我想要替换 JSON 中的对象数量 第 7 个对象数量 我该如何替换？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44673889/