Как обновить любой массив объектов в Javascript - PullRequest
Новая
       16

Как обновить любой массив объектов в Javascript

0 голосов
/ 31 октября 2019

Я пытаюсь обновить массив объектов. но я не могу понять, как я могу обновить его. Я пытаюсь использовать splice (), но он не работает для меня. Я предоставляю свой код ниже, если кто-то может решить мою проблему.

Я пытался .splice (), чтобы обновить его не работает 

<html>
<head>
<meta charset="utf-8">
<title>Table with Costumize CSS</title>
</head>

<body><br><br><br>
    <div class="container"><h1 align="center">Enter Details</h1><br></div>
        <div>
            <div class="grid-container">
                <!--style="border:solid"-->
                <div>
                <label>Enter ID: </label><br>
                <input type="number" class="form-control" id="id" name="id" required/><br><br>

                <label>Enter Name: </label><br>
                <input type="text" class="form-control" id="name" name="name" required/><br><br>


                <label>Enter City: </label><br>
                <input type="text"  class="form-control" id="city" name="city" required /><br><br>

                <label>Enter Email: </label><br>
                <input type="email" class="form-control"  id="email" name="email" required/><br><br>

                <button class="btn" onClick="printTable();" style="width: 32%;">Insert</button>
<!--                <button class="btn" onClick="UpdateTable();" style="width: 32%">Update</button>-->
                <button class="btn" onClick="clearForm();" style="width: 332">Clear Form</button><br><br>

                <button class="btn btn-danger" onClick="resetTable();" style="width: 100%;">Reset Table</button>

                </div>  

            <div>
                <table id="tablee" class="table table-striped table-hover table-bordered" style="border-radius: 5px;">
                <thead  class="thead-dark">
                    <tr>
                        <th>User ID</th>
                        <th>User Name</th>
                        <th>User Email</th>
                        <th>User City</th>
                        <th>Delete User</th>

                    </tr>
                </thead>
                <tbody id="showResult">

                </tbody>
            </table>
                </div>
            </div>
    </div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>


let data = [];
    var rIndex, table = document.getElementById('tablee');
function resetTable(){
    const confirmMessage = confirm("Are you sure want to reset table data? It will delete all data from table. You cannot undo this action.!");
    if(confirmMessage){
        window.location.reload();
        alert("Table Data Cleared Successfully");
    }
    else{
        alert("cancelled.!");
    }
}

function printTable(){
const getId = document.getElementById("id").value;
const getName = document.getElementById("name").value;
const getCity = document.getElementById("city").value;
const getEmail = document.getElementById("email").value;            

    if(getId != '' , getName != '' , getCity != '' , getEmail != '' ){

        const obj = {
            id: getId,
        name: getName,
        city: getCity,
        email: getEmail
        }
        data.push(obj);
        print(data);
        clearForm();

        }
    else{
        alert("All feilds are Mandatory..");
    }
}
    function clearForm(){

        $('#id').val("");   
        $('#name').val(""); 
        $('#city').val(""); 
        $('#email').val("");            
        }
function print(data) {

    let result = '';

    for(let i = 0; i<data.length;i++){

    result +=`

<tr>
<td>${data[i].id}</td>
<td>${data[i].name}</td>
<td>${data[i].email}</td>
<td>${data[i].city}</td>
<td><input type='button' onclick='deleteRow(this);' class='btn btn-danger' value='Delete'/></td>
<td><input type='button' onclick='UpdateTable(this);' class='btn btn-success' value='Update'/></td>


</tr>`;

        document.getElementById('showResult').innerHTML = result;
        getSelectedoRow();
    }
}

function deleteRow(btn) {
    var cnfrmMessage = confirm("Are you sure want to Delete selected data? You cannot undo this action.");
    if(cnfrmMessage == true){
        var row = btn.parentNode.parentNode;
        row.parentNode.removeChild(row);
        // Deleting from  Array using splice
//      data = data.splice(data,i);
//      console.log(data);clearForm();
        // Deleting from  Array using filter
         data = data.filter((item)=>item.id!==$(row).children()[0].innerText);

    }
    else{
        alert("Cancelled..!!");
    }
}
function getSelectedoRow(){
    for(var i = 1; i < table.rows.length; i++){
        table.rows[i].onclick = function(){
            // get the seected row index
            rIndex = this.rowIndex;
            document.getElementById("id").value = this.cells[0].innerHTML;
            document.getElementById("name").value = this.cells[1].innerHTML;
            document.getElementById("email").value = this.cells[2].innerHTML;
            document.getElementById("city").value = this.cells[3].innerHTML;

        };
    }
}

function UpdateTable(btn){

    var id = document.getElementById("id").value,
        name = document.getElementById("name").value,
        city = document.getElementById("city").value,
        email = document.getElementById("email").value;

    table.rows[rIndex].cells[0].innerHTML = id;
    table.rows[rIndex].cells[1].innerHTML = name;
    table.rows[rIndex].cells[2].innerHTML = email;
    table.rows[rIndex].cells[3].innerHTML = city;


//  data[rIndex].id = id;
//  data[rIndex].name = name;
//  data[rIndex].city = city;
//  data[rIndex].email = email;
//  

    console.log(data);

        alert("Data Updated Successfully..!!");
        clearForm();    
}


</script>
</body>
</html>

Данные обновлялись натаблицы, но я хочу обновить его на массив объектов .. Спасибо

...