locked
How to append <br/> tag inside <td> of the table? RRS feed

  • Question

  • User2072242043 posted

    Hello,

    I Have a table whose rows get created by a web service and the columns are coming from database. so, everything get fetched and works fine.
    Now, I want to append <br/> tag with one of the <td> of that row.
    Here is my code to do so

    success: function (data) {
                    $.each(data, function (index, item) {
                        $("<tr>").append(
                        $("<td>").text(item.FullDayName),
                        $("<td>").text(item.DisciplineName),
                        $("<td>").text(item.ShiftName),
                        $("<td>").text(item.BatchName+'-.'+'Semester '+ item.SemesterName + '-.' + item.TeacherName + '-.' + item.SubjectName + '-.' + item.RoomName + '-.' + item.FullDate + '-.' + item.StartTime + ' to ' + item.EndTime),
                        $("<td><p data-placement='top' data-toggle='tooltip' title='Delete'><a href='#' class='btn btn-danger btn-xs' data-title='Delete' data-toggle='modal' id='delete' value=" + item.id + " ><span class='glyphicon glyphicon-trash'></span></button></p></td>")
                        ).appendTo("#ClassTeacherSubjectsRoutingTable tbody");
    
                        $('td:contains("-.")').each(function (index,item) {
                            $(this).html($(this).html().replace("-.", "<br/>"));
                        });
                    });

    I have tried to put <br/> directly but it only prints it don't work as html </b> does.
    Above code works only when I have 3+ rows coming from database. It fails when I have one or two or even three rows.
    I know I have mistake somewhere but not able to find that since many hours.
    Please help me someone!

    Monday, January 2, 2017 9:23 AM

All replies

  • User1577371250 posted

    Hi,

    You can use HEIGHT attribute in <td>

    $("<td style='height:25px;'>").text(item.FullDayName),
    

    Monday, January 2, 2017 3:12 PM
  • User2072242043 posted

    I want to use <br/> not height.

    Monday, January 2, 2017 8:29 PM
  • User-1838255255 posted

    Hi Radhesham Khatri,

    According to your description, I know your meaning is want to convert td text to multiple rows inside of td. if so, you can try to use word-break:break-word attributes, it can break text in one td. Sample code:

    $(function () {
                for (var i = 0; i < 20; i++) {
                    $("#TB1").append(
                       "<td style='width:30px;word-break:break-word'>" + "TextTextText" + "</td>" 
                       )
                   }
            })

    Best Regards,

    Eric Du

    Tuesday, January 3, 2017 6:10 AM
  • User2072242043 posted

    Thanks Eric Du,

    Your answer was helpful and  have tried to put your suggestion in my code and hence it works but problem is, It breaks after the fix width which I i give like 20,50.100 means it breaks to new line when it reach the width limit.
    Here is a image which might help you to guide me in more better way

    Here is my code

     $.each(data, function (index, item) {
                        $("<tr>").append(
                        $("<td>").text(item.FullDayName),
                        $("<td>").text(item.DisciplineName),
                        $("<td>").text(item.ShiftName),
                        $("<td>").text(item.TypeOfExam),
    //Here in below td I have almost 9 values which should come line by line without breaking the values after some fixed width because every value is omming from database and that is not fix its value varies. so I want all this in same td
                        $("<td style='width:70px;word-break:break-word'>").text(item.BatchName+ 'Semester ' + item.SemesterName + item.TeacherName + item.SubjectName + item.RoomName+ item.FullDate+ item.StartTime+ item.EndTime),
                        $("<td><p data-placement='top' data-toggle='tooltip' title='Delete'><a href='#' class='btn btn-danger btn-xs' data-title='Delete' data-toggle='modal' id='delete' value=" + item.id + " ><span class='glyphicon glyphicon-trash'></span></button></p></td>")
                        ).appendTo("#ExamsRoutingTable tbody");

    Hope you can now guide me in better way.
    Thanks

    Tuesday, January 3, 2017 7:15 AM
  • User-1838255255 posted

    Hi Radhesham Khatri,

    Yes, word-break:break-word can make text wrap lines when access the fixed width. I am so sorry that not notice you have multiple fields in the before reply, So I suggest you could modify your code like this:

    <script>
            $(function () {
                for (var i = 0; i < 20; i++) {
                    $("#TB1").append(
                       "<td>" + filed + "</br>" + field + "</br>" + field + "</td>"
                       )
                }
            })
        </script>

    Best Regards,

    Eric Du

    Wednesday, January 4, 2017 10:05 AM