javascript - 如何在我的表格中动态添加行中打破文本？

问题描述

我创建了你可以在那里看到的效果表：

问题是，当我有很长的“文本信息”时，表格变得越来越宽，而不是文本被破坏并进入新的行和行得到扩展（拉长）。

即使我\n在某个时刻添加了文本，我也希望它打破。

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

我还阅读了有关str.split()方法的信息，但我不知道它是否适合这里。

另外，我通过想法创建了新表，而不是按照我想要的方式格式化的行：

在行内插入表格

如何将子节点附加到特定位置

但是在那里使用它似乎太复杂了，但我想不出更简单的解决方案。

<!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>

标签： javascripthtmldynamichtml-tableinsert

javascript - 如何在我的表格中动态添加行中打破文本？

问题描述

解决方案

推荐阅读