Remove From My Forums

increase td width depending on content of textbox inside td

Question
0

Sign in to vote

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

0

Sign in to vote

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