CODEWITHSUNDEEP
javascripthtml
Rauf javid
Rauf javid

Reputation: 77

How to update a row by clicking on update hyperlink of that row through java script?

enter image description here

function myCreateFunction() {
    var sel = document.getElementById("osp");
    var text = document.getElementById("fill_form");

    var tsp = sel.options[sel.selectedIndex].value;


    var name = text.name.value;
    var age = text.age.value;

    if (document.getElementById("r1").checked) {
        var radio_selected = document.getElementById("r1").value;
    } else if (document.getElementById("r2").checked) {
        var radio_selected = document.getElementById("r2").value;
    }
    var table = document.getElementById("myTable");
    var row = table.insertRow(table.rows.length);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);
    var cell5 = row.insertCell(4);
    cell1.innerHTML = name;
    cell2.innerHTML = radio_selected;
    cell3.innerHTML = age;
    cell4.innerHTML = tsp;
    var update = "Update";
    var remove = "Remove";

I want to update the row through update hyperlink, when user click on update the value of that row must passed to the function myUpdateFunction().

   var li='<a href="#" onclick="myUpdateFunction(name);"  > Update</a>';


 cell5.innerHTML = li;

}


    function myCreateFunction() {
        var sel = document.getElementById("osp");
        var text = document.getElementById("fill_form");

        var tsp = sel.options[sel.selectedIndex].value;


        var name = text.name.value;
        var age = text.age.value;

        if (document.getElementById("r1").checked) {
            var radio_selected = document.getElementById("r1").value;
        } else if (document.getElementById("r2").checked) {
            var radio_selected = document.getElementById("r2").value;
        }


        var table = document.getElementById("myTable");
        var row = table.insertRow(table.rows.length);
        var cell1 = row.insertCell(0);
        var cell2 = row.insertCell(1);
        var cell3 = row.insertCell(2);
        var cell4 = row.insertCell(3);
        var cell5 = row.insertCell(4);
        cell1.innerHTML = name;
        cell2.innerHTML = radio_selected;
        cell3.innerHTML = age;
        cell4.innerHTML = tsp;
        var update = "Update";
        var remove = "Remove";
        var li = '<a href="#"   onclick="alert(document.write(rows.selected.text));"  > Update</a>';


        cell5.innerHTML = li;


    }

    function myDeleteFunction() {
        var table = document.getElementById("myTable");
        document.getElementById("myTable").deleteRow(table.rows.length - 1);
    }
    function myUpdateFunction(nam) {
        var oTable = document.getElementById('myTable');

        //gets rows of table
        var rowLength = oTable.rows.length;

        //loops through rows
        for (i = 0; i < rowLength; i++) {

            //gets cells of current row
            var oCells = oTable.rows.item(i).cells;

            //gets amount of cells of current row
            var cellLength = oCells.length;

            //loops through each cell in current row
            for (var j = 0; j < cellLength; j++) {

                // get your cell info here

                var cellVal = oCells.item(j).innerHTML;
                alert(cellVal);
            }
        }

    }
    function ResetForm() {
        document.getElementById("fill_form").reset();
    }
table {
    border: solid black 1px;
    /*width:40%;*/
}

td {
    border: solid black 1px;
    width: 120px;
}

#person_table {
    /*border: solid aqua 2px;*/
    width: 49%;
    float: left;
    background-color: #ffccfe;

}

#person_form {
    float: left;
    /*border: solid blue 2px;*/
    width: 24%;
    background-color: #cdff94;
}

label {

    width: 15%;
    display: inline-block;
    /*border: solid chartreuse 2px;*/
    padding: 10px;

}

.nam {

    padding-bottom: 5px;
    padding-top: 5px;
    padding-left: 5px;
    padding-right: 5px;

}

#nam2 {
    text-align: left;
    padding: 5px;
}

#person_form #nam2 input {
    width: 100px;

}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
   <script src="js6.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="mystyle.css">

<body>

<div id="person_table">
    <h3>List Of Persons</h3>
    <table>
        <tr>
            <td>Name</td>
            <td>Gender</td>
            <td>Age</td>
            <td>City</td>
            <td>Action</td>

        </tr>
    </table>

    <table id="myTable">

    </table>
</div>

<div id="person_form">
    <h3>Add/Update Person Form</h3>

    <form id="fill_form">
        <div class="nam">
            <label> Name :</label>
            <input type="text" name="name">
        </div>

        <div class="nam">

            <label> Gender:</label>
            <input type="radio" name="gender" id="r1" value="male">Male
            <input type="radio" name="gender" id="r2" value="female">Female
        </div>

        <div class="nam">

            <label> Age :</label>
            <input type="text" name="age">
        </div>


        <div class="nam">

            <label> City:</label>
            <select name="cities_list" id="osp">
                <option value="lahore">Lahore</option>
                <option value="Islambad">Islambad</option>
                <option value="Karachi">Karachi</option>
                <option value="Okara">Okara</option>
            </select>
        </div>

        <input id="button" type="button" value=" Reset " onclick="ResetForm()">
        <input id="button" type="button" value=" Add " onclick="myCreateFunction()">
        <input id="button" type="button" value=" Update ">

    </form>

</div>

</body>
</html>

Upvotes: 0

Views: 104

Answers (1)

ak_
ak_

Reputation: 2815

You need to create a myUpdateFunction() and pass it a variable indicating which table row to update. I've updated the answer with a completed functions to add and modify users in the table.

HTML

<div id="person_table">
    <h3>List Of Persons</h3>
    <table id="myTable">
        <tr>
            <td>Name</td>
            <td>Gender</td>
            <td>Age</td>
            <td>City</td>
            <td>Action</td>
        </tr>
    </table>
</div>

<div id="person_form">
    <h3>Add/Update Person Form</h3>
    <form id="fill_form">
      <input type="hidden" name="rowIndex" id="rowIndex" value="1" />
        <div class="nam">
            <label> Name :</label>
            <input type="text" name="name" id="personName">
        </div>

        <div class="nam">

            <label> Gender:</label>
            <input type="radio" name="gender" id="r1" value="male">Male
            <input type="radio" name="gender" id="r2" value="female">Female
        </div>

        <div class="nam">

            <label> Age :</label>
            <input type="text" name="age" id="personAge">
        </div>


        <div class="nam">

            <label> City:</label>
            <select name="cities_list" id="osp">
                <option value="lahore">Lahore</option>
                <option value="Islambad">Islambad</option>
                <option value="Karachi">Karachi</option>
                <option value="Okara">Okara</option>
            </select>
        </div>

        <input id="personFormReset" type="button" value=" Reset " onclick="resetForm()">
        <input id="personFormModify" type="button" value=" Add " onclick="modifyTable()">

    </form>

</div>

Javascript

//modifyTable() is used to add and modify records in the table
function modifyTable() {

    //get name
    var personName = document.getElementById("personName").value;

    //get age
    var personAge = document.getElementById("personAge").value;

    //get city
    var osp = document.getElementById("osp");
    var personCity = osp.options[osp.selectedIndex].value;

    //get gender
    if (document.getElementById("r1").checked) {
        var personGender = document.getElementById("r1").value;
    } else if (document.getElementById("r2").checked) {
        var personGender = document.getElementById("r2").value;
    }

    //the table
    var table = document.getElementById("myTable");



    //get the value for the row we want to add or modify
    //rowIndex is used to keep track of where in the table we need to add or update
    var rowIndex = parseInt(document.getElementById("rowIndex").value);

    //if the rowIndex is not the same as the number of rows in the table, we are updating a record, and we need to remove the old data
    if(table.rows.length != rowIndex) {
        //updating a record
        table.deleteRow(rowIndex);  //remove the old table row
    } else {
        //adding a record
        //update the tableIndex
        document.getElementById("rowIndex").value = rowIndex+1;
    }

    //get the row we want to add/modify
    var row = table.insertRow(rowIndex);



    var cell1 = row.insertCell();
    var cell2 = row.insertCell();
    var cell3 = row.insertCell();
    var cell4 = row.insertCell();
    var cell5 = row.insertCell();
    cell1.innerHTML = personName;
    cell2.innerHTML = personGender;
    cell3.innerHTML = personAge;
    cell4.innerHTML = personCity;
    var update = "Update";
    var remove = "Remove";
    var action='<a href="#" onclick="myUpdateFunction('+(rowIndex)+');"  > Update</a>';
    cell5.innerHTML = action;

    //clear the form.  this function also resets the tableIndex which is critical if we just did a table modification, because the index will not be at the end of the table
    resetForm();
}





//
function myUpdateFunction(tableRow) {

  //get name
  document.getElementById("personName").value = myTable.rows[tableRow].cells[0].innerHTML;

  //get gender
  if(myTable.rows[tableRow].cells[1].innerHTML == "male") {
      document.getElementById("r1").checked = true;
  } else {
    document.getElementById("r2").checked = true;
  }

  //get age
  document.getElementById("personAge").value = myTable.rows[tableRow].cells[2].innerHTML;


  //get city
  for(var i = 0; i < document.getElementById("osp").length; i++) {
    if(document.getElementById("osp")[i].value == myTable.rows[tableRow].cells[3].innerHTML) {
      document.getElementById("osp").selectedIndex = i;
        break;
    }
  }

  //get the rowIndex
  //this makes sure we update the correct row when the user clicks 'update' and we call modifyTable();
  document.getElementById("rowIndex").value = tableRow;



  //update the button text
  document.getElementById("personFormModify").value = "Update";
}



function resetForm() {

  //reset name
  document.getElementById("personName").value = "";

  //reset gender
  document.getElementById("r1").checked = false;
  document.getElementById("r2").checked = false;

  //reset age
  document.getElementById("personAge").value = "";

  //reset city
  document.getElementById("osp").selectedIndex = 0;

  //reset button
  document.getElementById("personFormModify").value = "Add";

  //make sure the rowIndex is updated, so the table is ready to insert a new record at the right place
  document.getElementById("rowIndex").value = document.getElementById("myTable").rows.length;
}

There was quite a bit of cleanup you can do to your javascript and html to remove errors, remove invalid code, make it cleaner, easier to read, and more efficient. This example is just to show you how the concept works. You can see it working in this JS Fiddle: http://jsfiddle.net/5Lesopx1/1/

Hope that helps! :-)

Upvotes: 1

Related Questions