locked
Function Executing only once on button click RRS feed

  • Question

  • User-571605279 posted

    Dear All

    I had written the below java-script to create the "input" control in html table row on button click .
    And I am able to do that ,But it is happening only once and when i click 2nd time I am able to execute the function but adding the control in html row.

    Can any one help me in knowing for what reason I am unable to add to make it.

    <button onclick="myFunction()">Try it</button>
     <table id="tblCustomListData" border="1" width="100%" style="overflow-x:auto;">
                  <thead>
                         <tr class="bgcolorgray">
                            <th>Sno</th>
                            <th >Current DR</th>
                         </tr>
                  </thead>
                </table>
    </div >
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript">
    
    function myFunction() {
    
    var txtHTML = "";
    $('#tblCustomListData tbody').html('');
    
         var i="10";
    
            var button = document.createElement('input');
            button.setAttribute('type', 'text');
            button.setAttribute('value', i);
    
          var tr = $('<tr>');
    
              var td = $('<td>');
              td.append(button);
              tr.append(td);
    
              var td = $('<td>');
              td.append(i);
              tr.append(td);
    
         $("#tblCustomListData").append(tr);
    
    }
    
    </script>
    
    
    </body>
    </html>
    

    Saturday, March 10, 2018 12:21 PM

Answers

  • User-832373396 posted

    Hi Beginer,

    How can I add the rows on button click with out deleting the row.

    Sir, It is so easy to fix it, please remove one line code from your current code.

    Please refer to this as shown below, everything will be ok :)

    <script type="text/javascript">
    
    function myFunction() {
    var txtHTML = "";
    //$('#tblCustomListData tbody').html('');

    The result, when you click at the second time, it will not clear the tblCustomListData again;

    Welcome to back if met any question :)

    With regards, Angelina Jolie

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 15, 2018 8:11 AM

All replies

  • User-474980206 posted

    because your first step before adding as row, is to delete all previous rows.

    Saturday, March 10, 2018 11:10 PM
  • User-571605279 posted

    Thanks for you response bruce,

    Could you please help me ,How can I add the rows on button click with out deleting the row.

    Sunday, March 11, 2018 3:57 AM
  • User-832373396 posted

    Hi Beginer,

    How can I add the rows on button click with out deleting the row.

    Sir, It is so easy to fix it, please remove one line code from your current code.

    Please refer to this as shown below, everything will be ok :)

    <script type="text/javascript">
    
    function myFunction() {
    var txtHTML = "";
    //$('#tblCustomListData tbody').html('');

    The result, when you click at the second time, it will not clear the tblCustomListData again;

    Welcome to back if met any question :)

    With regards, Angelina Jolie

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, March 15, 2018 8:11 AM
  • User-571605279 posted

    Dear Sir / Mam,

    Thank for your gentle and kind support , Which is also making me to motivate and contribute at my beginning stage smile

    Thursday, March 15, 2018 10:50 AM