How to create a form field and update the record dynamicaly in table using java script

Question

Example:

I created a field name in html . I want to update that field in the table and I want to delete the record whenever I want to.

Below is the example for creation and deletion the rows but I don't know how to get the values whenever I click the submit and add it in the table using `javascript'.

<HTML>
    <HEAD>
        enter code here
    <TITLE> create/delete rows </TITLE>
    <SCRIPT language="javascript">
        function addRow(tableID) {

            var table = document.getElementById(tableID);
        var name=document.getElementById("mtext");
        document.getElementById("mtext").value = name;

            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);

            var cell1 = row.insertCell(0);
            var element1 = document.createElement("input");
            element1.type = "checkbox";
            element1.name="chkbox[]";
            cell1.appendChild(element1);

            var cell2 = row.insertCell(1);
            cell2.innerHTML = rowCount + 1;

            var cell3 = row.insertCell(2);
            var element2 = document.createElement("input");
            element2.type = "text";
            element2.name = "txtbox[]";
            cell3.appendChild(element2);


        }

        function deleteRow(tableID) {
            try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;

            for(var i=0; i<rowCount; i++) {
                var row = table.rows[i];
                var chkbox = row.cells[0].childNodes[0];
                if(null != chkbox && true == chkbox.checked) {
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }


            }
            }catch(e) {
                alert(e);
            }
        }

    </SCRIPT>
</HEAD>
<BODY>
    <label>Name:</label><INPUT type="mtext">
    <INPUT type="button"value="submit" onclick="addRow('dataTable')" />
    <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
    <TABLE id="dataTable" width="350px" border="1">
        <TR>
            <TD><INPUT type="checkbox" name="chk"/></TD>
            <TD> 1 </TD>
            <TD> <INPUT type="text" /> </TD>
        </TR>
    </TABLE>
</BODY>

Answer 1

Refer this code..

 <div id="POItablediv">
<input type="button" id="addPOIbutton" value="Add POIs"/><br/><br/>
<table id="POITable" border="1">
    <tr>
        <td>POI</td>
        <td>Latitude</td>
        <td>Longitude</td>
        <td>Delete?</td>
        <td>Add Rows?</td>
    </tr>
    <tr>
        <td>1</td>
        <td><input size=25 type="text" id="latbox"/></td>
        <td><input size=25 type="text" id="lngbox" readonly=true/></td>
        <td><input type="button" id="delPOIbutton" value="Delete"   onclick="deleteRow(this)"/></td>
        <td><input type="button" id="addmorePOIbutton" value="Add More POIs" onclick="insRow()"/></td>
    </tr>
</table>

js code is here..

   function deleteRow(row)
  {
  var i=row.parentNode.parentNode.rowIndex;
  document.getElementById('POITable').deleteRow(i);
 }


  function insRow()
 {
    console.log( 'hi');
   var x=document.getElementById('POITable');
   var new_row = x.rows[1].cloneNode(true);
   var len = x.rows.length;
   new_row.cells[0].innerHTML = len;

    var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
   inp1.id += len;
   inp1.value = '';
   var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
  inp2.id += len;
   inp2.value = '';
   x.appendChild( new_row );
  }

Click on link below for live demo

EXAMPLE : http://jsfiddle.net/7AeDQ/

How to create a form field and update the record dynamicaly in table using java script

Question

1 answers

solution1
0 2015-07-11 08:00:15

How to create a form field and update the record dynamicaly in table using java script

Question

1 answers

solution1 0 2015-07-11 08:00:15

solution1
0 2015-07-11 08:00:15