Question

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（'user'））未定义一个（7）[对象，对象，对象，对象，对象，对象，对象]

“[{” 名称 “：” KV”， “数字”： “65464564”， “城市”：“艾哈迈达巴德”， “爱好”：“板球，象棋，曲棍球”， “出生日期”：“2019年2月2日” }， {
“名”：“KV” “数字”： “65464564”， “城市”：“艾哈迈达巴德”， “爱好”：“板球，象棋，曲棍球”， “出生日期”：“2019年2月2日” }， {
“名”：“KV” “数字”： “65464564”， “城市”：“艾哈迈达巴德”， “爱好”：“板球，象棋，曲棍球”， “出生日期”：“2019年2月2日” }， {
“名”：“KV” “数字”： “65464564”， “城市”：“艾哈迈达巴德”， “爱好”：“板球，象棋，曲棍球”， “出生日期”：“2019年2月2日” }， {
“名”：“KV” “数字”： “65464564”， “城市”：“艾哈迈达巴德”， “爱好”：“板球，象棋，曲棍球”， “出生日期”：“2019年2月2日” }， {
“名”：“KV” “数字”： “65464564”， “城市”：“艾哈迈达巴德”， “爱好”：“板球，象棋，曲棍球”， “出生日期”：“2019年2月2日” }， {
“名”：“KV” “数字”： “65464564”， “城市”：“艾哈迈达巴德”， “爱好”：“板球，象棋，曲棍球”， “出生日期”：“2019年2月2日” } ]“

Answer 1

try this one
a[7].name = "jerry";

Answer 2

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));

JSON中的对象数量我想替换7号对象如何替换？

2 个答案: