Home/ Questions/Q 4598518
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-21T23:24:39+00:00

I created a table with five columns dynamically. Two (the second and third column)

  • 0

I created a table with five columns dynamically. Two (the second and third column) of the five columns should be editable on the fly. Each time when user click on one the editable table cell, JavaScript should catch the user input and send the data to the server in json format. I have problem catch the user input and send to the server. Please help. This is my sample code – 

<!DOCTYPE html>
<html>
<head>
  <title>Editable table</title> 
    <style type="text/css" title="currentStyle">        
        @import "css/table.css"; 
    </style>
    <script type="text/javascript" language="javascript" src="js/jquery.js"></script>   

</head>
<body id="dt_example">
    <div id="container">
        <div class="full_width big">
                Data table<br />                
        </div>

    <div class="editab">
        <table border="1">
            <thead>
                <tr>
                    <th>Contract Number</th>
                    <th>Current Status</th>                     
                    <th>Sale Balance Amount</th>
                    <th>Interest Rate</th>
                    <th>Discount</th>
                </tr>
            </thead>
            <tbody>
                <tr>                
                    <td>00123</td>
                    <td onClick="editTableCell(this)">A30</td>
                    <td onClick="editTableCell(this)">$1,500.00</td>
                    <td>3.99 %</td>
                    <td>140</td>
                </tr>
                <tr>                
                    <td>00234</td>
                    <td onClick="editTableCell(this)">B20</td>
                    <td onClick="editTableCell(this)">$2,500.00</td>
                    <td>3.99 %</td>
                    <td>160</td>
                </tr>
                <tr>                
                    <td>00345</td>
                    <td onClick="editTableCell(this)">C40</td>
                    <td onClick="editTableCell(this)">$3,500.00</td>
                    <td>3.99 %</td>
                    <td>180</td>
                </tr>
                <tr>                
                    <td>00456</td>
                    <td onClick="editTableCell(this)">A20</td>
                    <td onClick="editTableCell(this)">$4,500.00</td>
                    <td>3.99 %</td>
                    <td>200</td>
                </tr>
                <tr>                
                    <td>00567</td>
                    <td onClick="editTableCell(this)">B30</td>
                    <td onClick="editTableCell(this)">$5,500.00</td>
                    <td>3.99 %</td>
                    <td>225</td>
                </tr>
                <tr>                
                    <td>00678</td>
                    <td onClick="editTableCell(this)">C10</td>
                    <td onClick="editTableCell(this)">$6,500.00</td>
                    <td>3.99 %</td>
                    <td>250</td>
                </tr>
                <tr>                
                    <td>00789</td>
                    <td onClick="editTableCell(this)">A30</td>
                    <td onClick="editTableCell(this)">$7,500.00</td>
                    <td>3.99 %</td>
                    <td>300</td>
                </tr>                   
            </tbody>
        </table>
    </div>

</div>
<script type="text/javascript">
    var SelectState = false;
    var SelectedElement = null;
    var TextInput = null;
    var CellText = null;
    var txt     = "test";
    var idcount  = 0;

    function editTableCell( e ){

      if ( SelectState == false ){

        SelectedElement = e;
        CellText = e.innerHTML;     
        e.innerHTML = "";

        var objInput = document.createElement("input");
        objInput.type = 'text';
        objInput.value = CellText;
        objInput.id = "txt" + idcount++;
        objInput.onkeypress = editTextBox;
        objInput.size = 15;

        TextInput = objInput;
        e.appendChild(objInput);

        SelectState = true;

      } else if (e != SelectedElement) {
        SelectedElement.innerHTML = CellText;
        SelectState = false;
      }
    }

    function editTextBox( e ){

      if (navigator.appName == "Microsoft Internet Explorer"){
        e = window.event;
        key = e.keyCode;
      }

      else if (navigator.appName == "Netscape"){
        key = e.which;
      }

      if ( key == 13 ){
        SelectedElement.innerHTML = TextInput.value;
        SelectState = false;
      }

      else if ( key == 27 ){
        SelectedElement.innerHTML = CellText;
        SelectState = false;
      }
    }   

/*      var attrName  = "":
    var attrValue = "";
    if ($('#test1')
    {
        attrName=  "editField01";
        attrValue = $(#test1).val();
    }
    if ($('#test2')
    {
        attrName=  "editField02";
        attrValue = $(#test2).val();
    }

    if ($('#test3')
    {
        attrName=  "editField03";
        attrValue = $(#test3).val();
    }

     var values = '{"' + attrName + '":' + attrValue + '}';
      $.ajax({
        url: serverUrl + "/abc/contract/" + poolId,
        async: false,
        type: "PUT",
        data: JSON.stringify(values),
        dataType: 'json',
        processData: false,
        contentType: 'application/json',
        success: showResponse(json) {
          // TODO: What info is returned in the data structure?
          showResponse;
        },
        error: function(err) {
          alert("Failed to update the attribute");
          htmlErrorDialog(err.responseText);
        }
      });*/

    function showResponse(json)  { 
      if(json.success){
        // handle successful response here
        alert("user input from column sent successfully!");
      } else {
        // handle unsuccessful response here
        alert("user input fail to send. Please try again");
      }
    } 
    </script>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’re not actually passing the json data to showResponse:

        success: showResponse(json) {
      // TODO: What info is returned in the data structure?
      showResponse;
    },

    Pass it along as so, and make sure that json is an actual object and that you don’t need to parse it first:

        success: function(json) {
      // check that json is an actual object via an alert
      // alert(json);
      showResponse(json);
    },

    EDIT: Okay after a lot of working around, I have a simple test case for making the fields editable. Please note it uses jquery, and comments are inline:

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Test</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
    <!-- Date: 2011-05-10 -->
</head>
<body>
    <form>
    <table border="1">
        <thead>
            <tr>
                <th>Contract Number</th>
                <th>Current Status</th>                     
                <th>Sale Balance Amount</th>
                <th>Interest Rate</th>
                <th>Discount</th>
            </tr>
        </thead>
        <tbody>
            <tr>         
                <!-- The "identifier" class makes it so we have an id
                    to pass to our ajax script so we know what to change -->       
                <td class="identifier">00123</td>
                <td class="editable">A30</td>
                <td class="editable">$1,500.00</td>
                <td>3.99 %</td>
                <td>140</td>
            </tr>                   
        </tbody>
    </table>
    </form>     
    <script type="text/javascript">
        // bind our event handler to all td elements with class editable
        $('td.editable').bind('click', function() {
            // Only create an editable input if one doesn't exist
            if(!$(this).has('input').length) {
                // Get the text from the cell containing the value
                var value = $(this).html();
                // Create a new input element with the value of the cell text
                var input = $('<input/>', {
                    'type':'text',
                    'value':value,
                    // Give it an onchange handler so when the data is changed
                    // It will do the ajax call
                    change: function() {
                        var new_value = $(this).val();
                        // This finds the sibling td element with class identifier so we have
                        // an id to pass to the ajax call
                        var cell = $(this).parent();
                        // Get the position of the td cell...
                        var cell_index = $(this).parent().parent().children().index(cell);
                        // .. to find its corresponding header
                        var identifier = $('thead th:eq('+cell_index+')').html();
                        //ajax post with id and new value
                        $(this).replaceWith(new_value);
                    }
                });
                // Empty out the cell contents...
                $(this).empty();
                // ... and replace it with the input field that has the value populated
                $(this).append(input);
            }
        });
    </script>
</body>

    • 0