How to break text in dynamically added row in my table?

Question

I created table which's effect you can see there:

https://i.stack.imgur.com/UAIAS.jpg

The problem is that, when i have long "text info" the table is getting wider instead of text being broken and getting into new line and row geting extended(elongated).

Problem shown here:
https://i.stack.imgur.com/Xiwcr.jpg

even when i added \n in text in moments I wanted it to break.

let newText = document.createTextNode('TEXT INFO AND VERY LONG TEXT INFO \n THAT SHOULD MAKE THE TABLE \n THE SAME THICKNESS BUT LONGER');

I read also about str.split() method but I do not know if it's suitable here.

Additionaly, I went through idea to create new table instead of row that would be formatted the way I want basing on:

Insert Table Inside a Row

How to append a childnode to a specific position

But it seems to be too sophisticated to use it there, but I cannot think of simpler solution here.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>...:::   Multicast   :::...</title>
<link rel="stylesheet" type="text/css" href="multicast.css">
<script src="js/jquery.min.js"></script>
<script src="js/jquery.sortElements.js"></script>
</head>
<body>

<?php
$provider = "Test_provider";
echo '<table id="my-table">';
echo '<tr><th colSpan = "3">INPUT ROW MULTICAST</th></tr>';
echo '<tr><th id="sort11">Sort A</th><th id="sort11">Sort B</th><th id="sort11">Sort C</th></tr>';
for($counter = 0; $counter <= 9; $counter++){
    $provider = "Test_provider";
    echo' <tr id ="'.$counter.'"><td><button onclick="specialFunc()">'.$provider.'</button></td><td>Row '.$counter.' Col '.$counter.'</td><td>Row '.$counter.' Col '.$counter.'</td></tr>';
}
echo '</table>';
?>
<script>
isFirst = true;
var testTable = document.getElementById("my-table"),rIndex,cIndex;
function addRow(rIndex) {  
            var currPos = rIndex;
            let tableRef = document.getElementById("my-table");
            let newRow = tableRef.insertRow(rIndex);
            newRow.id = "open row"
            let newCell = newRow.insertCell(0);
            newCell.colSpan = 3;
            let newText = document.createTextNode('TEXT INFO');
            newCell.appendChild(newText);
            newRowNumb = document.getElementById("open row").rowIndex;
            console.log("new row addRow:" + newRowNumb);
}
function specialFunc(){ 
buttFlag = true;
for(var i = 2; i < testTable.rows.length; i++)
{
    for(var j = 0; j < testTable.rows[i].cells.length; j++)
    {
        testTable.rows[i].cells[j].onclick = function()
        {
            rIndex = this.parentElement.rowIndex;
            cIndex = this.cellIndex;
            //console.log(rIndex,cIndex);
            if(buttFlag==true){
            if (isFirst ){
                    rIndex = rIndex+1;                  
                    addRow(rIndex);
                    console.log("new row first call :" + newRowNumb);
                    isFirst = false;
                    currPos = rIndex;
                        buttFlag = false;
            }
            else{
                    if(rIndex == (currPos - 1))
                        temp=1
                    else{                       
                        if(rIndex==1){rIndex=rIndex+1;}
                        if(typeof currPos != "undefined"){testTable.deleteRow(currPos);}
                        if(rIndex < currPos){rIndex=rIndex+1;}
                            addRow(rIndex);
                            console.log("new row second call and more:" + newRowNumb);
                            currPos = rIndex;
                                buttFlag = false;
                    }
            }
        }           
        }
        };
    }
};
</script>
<script>
    //var table = $('table');
    var table = $('#my-table');
    $('#sort11,#sort12,#sort13')
        .each(function(){            
            var th = $(this),
                thIndex = th.index(),
                inverse = false;            
            th.click(function(){    
                if (typeof newRowNumb != "undefined") {
                console.log("del row sort func :" + newRowNumb);
                document.getElementById("my-table").deleteRow(newRowNumb);
                newRowNumb = void 0;
                }               
                table.find('td').filter(function(){

                return $(this).index() === thIndex;


                }).sortElements(function(a, b){

                    return $.text([a]) > $.text([b]) ?
                        inverse ? -1 : 1
                        : inverse ? 1 : -1;

                }, function(){                    
                    // parentNode is the element we want to move
                    return this.parentNode;                     
                }); 

                //newRowNumb = void 0;
                currPos = void 0;
                isFirst = true;
            });
        });
</script>
</body>
</html>

Tom Marienfeld · Answer 1 · 2019-09-09T11:13:58.990

2

You can solve this issue with CSS setting max-width.

Edit: Looks like for your example it would be better to change the max-midth of tr.

td {
    max-width: 200px;
    min-width: 150px;
    word-wrap: break-word;
}

<table border="1">
    <tr>
        <th>Header1</th>
        <td>Value</td>
    </tr>
    <tr>
        <th>Header</th>
        <td>MMMMMMMMMMMMMMMMMMMMMMMMMMMassiveValue</td>
    </tr>
</table>

edited Sep 09 '19 at 11:13

answered Sep 09 '19 at 11:08

Tom Marienfeld

716
3
14

that would be good approach but more useful for me would be braking lines when I say it to do so. For example I'll have lines: `CONTACT 0-000-000-000 example@example.com \n CONTACT 0-000-000-000 example@example.com` and I would break line where `\n` is. I it possible? Additionaly, is `min-width` parameter required to text-wrapping or just `max-width`? – Sep 09 '19 at 11:17
You can read more about my problem here: https://stackoverflow.com/questions/57869532/why-breaking-line-n-doesnt-work-in-my-code – Sep 10 '19 at 12:25

score 1 · Answer 2 · answered Sep 09 '19 at 11:38

1

You can use the CSS word-break: break-word for the respective <td> where you want the breaks. You can keep the width of the <td> as per the parent element's width.

Hoping this helps.

answered Sep 09 '19 at 11:38

Miral Kumbhani

153
1
3
16

1

that's good idea, however could you explain me how to pass width of `` of parent element to element that will be created? – Sep 09 '19 at 11:54
1

You can use `width: inherit`. – Miral Kumbhani Sep 09 '19 at 12:38
It inherits width of row in case of setting this parameter into cell? – Sep 10 '19 at 12:25

How to break text in dynamically added row in my table?

2 Answers2