locked
increase td width depending on content of textbox inside td RRS feed

  • Question

  • User-1634604574 posted

    $.get("/Role_Permission_Manager/Return_Role_Permission_Manager", {

    role: $("#role").val(),
    doctype: $("#doctype").val(),


    }, function (data) {
    var row;
    $.each(data, function (i, v) {

    row += '<tr>'
    + '<td style="display:none;font-size:12px;height:40px"><input type="text" style="width:10px;background-color:transparent;outline:none;border:none" name="Series" value="' + v.series + '"></td>'

    +'</tr > '

    });
    $("#example").find("tr:gt(0)").remove();
    $("#example").append(row);

    i want to make that td width auto depending on content of textbox which is inside table td

    Tuesday, February 26, 2019 12:51 PM

Answers

  • User839733648 posted

    Hi zhyanadil.it@gmail.com,

    I suggest that you could get the length of the value in td and set the value to textbox when rendering the table.

    Here is my testing code.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>
            $(function () {
                var jsonData = '[{"id":"1","name":"Helen","age":"23"},{"id":"2","name":"Bob","age":"25"},{ "id":"3", "name":"Timmy", "age":"26"}]';
                response = $.parseJSON(jsonData);
                var table = $("#mytable");
                $('body').append(table);
                var trHTML = '';
                $.each(response, function (i, item) {
                    trHTML += '<tr><td>' + item.id + '</td><td><input style="width:' + item.name.length * 9 + 'px" type="text"  value="' + item.name + '"/></td><td>' + item.age + '</td></tr>';
                    //var myLength = item.name.length;
                    //console.log(myLength);
                });
                $('#mytable').append(trHTML);
    
            })
        </script>
        <style>
            table {
                border-collapse: collapse;
            }
    
            table, th, td {
                border: 1px solid black;
            }
    
        </style>
    </head>
    <body>
        <table id="mytable">
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </table>
    </body>
    </html>

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, February 27, 2019 7:52 AM

All replies

  • User475983607 posted

    First, you are describing the default behavior of an html table.  I recommend learning HTML basics.

    Second, you've fixed the width of the text input so it will always be 10px.  Look into using a responsive framework like Bootstrap. 

    https://getbootstrap.com/

    Tuesday, February 26, 2019 2:00 PM
  • User839733648 posted

    Hi zhyanadil.it@gmail.com,

    I suggest that you could get the length of the value in td and set the value to textbox when rendering the table.

    Here is my testing code.

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script>
            $(function () {
                var jsonData = '[{"id":"1","name":"Helen","age":"23"},{"id":"2","name":"Bob","age":"25"},{ "id":"3", "name":"Timmy", "age":"26"}]';
                response = $.parseJSON(jsonData);
                var table = $("#mytable");
                $('body').append(table);
                var trHTML = '';
                $.each(response, function (i, item) {
                    trHTML += '<tr><td>' + item.id + '</td><td><input style="width:' + item.name.length * 9 + 'px" type="text"  value="' + item.name + '"/></td><td>' + item.age + '</td></tr>';
                    //var myLength = item.name.length;
                    //console.log(myLength);
                });
                $('#mytable').append(trHTML);
    
            })
        </script>
        <style>
            table {
                border-collapse: collapse;
            }
    
            table, th, td {
                border: 1px solid black;
            }
    
        </style>
    </head>
    <body>
        <table id="mytable">
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Age</th>
            </tr>
        </table>
    </body>
    </html>

    result:

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, February 27, 2019 7:52 AM