locked
How to use document.body.appendChild to add in html row RRS feed

  • Question

  • User-571605279 posted

    Dear All,

    I am very new to programming , And I had written the code to create the "input control" . And I am able to make it ,
    But I need to place the input control in html table row  "txtHTML = txtHTML + "Place the created input control here" + "</a>";

    can any one please help me how can I do 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 x = document.createElement("INPUT");
    x.setAttribute("type", "text");
    x.setAttribute("id", "uniqueIdentifier");
    x.setAttribute("value", "Hello!");
    document.body.appendChild(x);


     
      txtHTML = txtHTML + "<tr>";
         txtHTML = txtHTML + "<td>";
         txtHTML = txtHTML +"Place the created input control here" + "</a>";
         txtHTML = txtHTML + "</td>";
      txtHTML = txtHTML + "</tr>";
                     
      $("#tblCustomListData").append(txtHTML);
      
      }
    </script>


    </body>
    </html>

    Friday, March 9, 2018 7:36 PM

Answers

  • User2103319870 posted

    Beginer

    But I need to place the input control in html table row 

    Instead of mixing both Javascript and Jquery codes, you could use a Complete Jquery solution like below

        <script type="text/javascript">
            function myFunction() {
                var txtHTML = "";
                //Create Textbox
                var textInputBox = $('<input />').attr({
                    type: "text",
                    id: "uniqueIdentifier",
                    value: "Hello!"
                });
                //Create table row tag
                var tr = $('<tr>');
                //Create Table defintion tag
                var td = $('<td>');
                //Append textbox to td
                td.append(textInputBox);
                //Append td to tr
                tr.append(td);
                //append tr to table
                $("#tblCustomListData > tbody").append(tr);
    
            }
        </script>

    You also need to add a tbody tag your table for this code to work as expected

    Complete Code

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
    
        <script type="text/javascript">
            function myFunction() {
                var txtHTML = "";
                //Create Textbox
                var textInputBox = $('<input />').attr({
                    type: "text",
                    id: "uniqueIdentifier",
                    value: "Hello!"
                });
                //Create table row tag
                var tr = $('<tr>');
                //Create Table defintion tag
                var td = $('<td>');
                //Append textbox to td
                td.append(textInputBox);
                //Append td to tr
                tr.append(td);
                //append tr to table
                $("#tblCustomListData > tbody").append(tr);
    
            }
        </script>
    </head>
    <body >
      <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>
                   <tbody>
         
                   </tbody>
                </table>
    </body>
    </html>
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 9, 2018 8:06 PM

All replies

  • User2103319870 posted

    Beginer

    But I need to place the input control in html table row 

    Instead of mixing both Javascript and Jquery codes, you could use a Complete Jquery solution like below

        <script type="text/javascript">
            function myFunction() {
                var txtHTML = "";
                //Create Textbox
                var textInputBox = $('<input />').attr({
                    type: "text",
                    id: "uniqueIdentifier",
                    value: "Hello!"
                });
                //Create table row tag
                var tr = $('<tr>');
                //Create Table defintion tag
                var td = $('<td>');
                //Append textbox to td
                td.append(textInputBox);
                //Append td to tr
                tr.append(td);
                //append tr to table
                $("#tblCustomListData > tbody").append(tr);
    
            }
        </script>

    You also need to add a tbody tag your table for this code to work as expected

    Complete Code

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset=utf-8 />
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.2.js"></script>
    
        <script type="text/javascript">
            function myFunction() {
                var txtHTML = "";
                //Create Textbox
                var textInputBox = $('<input />').attr({
                    type: "text",
                    id: "uniqueIdentifier",
                    value: "Hello!"
                });
                //Create table row tag
                var tr = $('<tr>');
                //Create Table defintion tag
                var td = $('<td>');
                //Append textbox to td
                td.append(textInputBox);
                //Append td to tr
                tr.append(td);
                //append tr to table
                $("#tblCustomListData > tbody").append(tr);
    
            }
        </script>
    </head>
    <body >
      <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>
                   <tbody>
         
                   </tbody>
                </table>
    </body>
    </html>
    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, March 9, 2018 8:06 PM
  • User-571605279 posted

    Thanks dear for your kind reply,

    I use java script because I am very familiar with it , But I need to add dynamic value text box  , And when I am trying to add the  values based on variable.Can you please do let me know how can I assign the value to text box based on variable 

    var textboxvalue="Glenn Quagmire";
    var textInputBox = $('<input />').attr({type: "text",id: "uniqueIdentifier" });
    $("#uniqueIdentifier").val(textboxvalue);

    Saturday, March 10, 2018 2:39 AM
  • User-571605279 posted

    A2H ,

    Thanks for your support .Your code worked for me.

    And I was also trying to pass the value through variable .And below code worked

    var htmlFragment= '<input type="text" name="' + nameofinputbox + '"' + ' id="'+uniqueIdentifierID+'"' + ' value="'+tempvalue+'">';  //I use this quite a bit.
    
      var tr = $('<tr>');
      var td = $('<td>');
      td.append(htmlFragment);
      tr.append(td);


    Sunday, March 11, 2018 3:24 PM