使用javascript for循环在TD内部创建跨度

编程问答 2022-08-14

问题描述

我想使用循环将<span> s添加到javascript中的<td> s中。对我来说，原因是能够抓住文本内容的宽度，因为它与跨度相同。但是现在我只想知道...

工作片段：

function mach()
{
    var span = Div1.appendChild(document.createElement("SPAN"));
    span.setAttribute("id","Div"+1);
    var tex = span.appendChild(document.createTextNode("Hola Que Tal Me Gusta"));
    //console.log(tex,tex.length,tex.width);
    var HisWidth = getComputedStyle(document.getElementById("Div1")).getPropertyValue('width')
    console.log(HisWidth,Div1);
     
}
<html>

<head>
    <Meta charset="UTF-8">
</head>

<body bgcolor="#FFFFE0" text="#000000">
  

<table id="tabelle" style="float:left" cellpadding="12" cellspacing="0">
    <tr>
            <td id="Div1"></td>
    </tr>

    <tr>
            <td id="Div2"></td>
    </tr>
</table>        
  
 <input type="button" onClick="mach()" value="  create span inside td   "> 
  </body>


</html>
var array = new Array();
var table = document.createElement('TABLE');
var tableBody = document.createElement('TBODY');
    table.border = '0';
    table.appendChild(tableBody);
  
var x="Hello";
var y = "World";

function makeAndFillTable()
{
    
        array.push(x,y);
        

        var myTableDiv = document.getElementById("Historie");
        

        tableBody.innerHTML = "";
        var j=array.length;
        

    
        for(var i=0;i<array.length;i++,j--)
        {
        
            var tr = document.createElement('TR');
                tableBody.appendChild(tr);
            
            var td = document.createElement('TD')
            td.setAttribute("id","td"+i);
           
            var span = td.appendChild(document.createElement("SPAN"));
            span.setAttribute("id","span"+i);
            
            span.appendChild(document.createTextNode(array[j-1]));
            var HisWidth = getComputedStyle(document.getElementById("span"+i)).getPropertyValue('width')
            console.log(HisWidth,span0);
            

            td.style.csstext='width:251.665px;text-align:right;font-size:14px';

            

            tr.appendChild(td);
            myTableDiv.appendChild(table)
            
            
            
        }
        
}
<html>
<head>
<Meta charset="UTF-8">
</head>
<body>
<input type="button"value="there"onClick="makeAndFillTable()">

<div class="Historie" id="Historie">
</div>
</body>
</html>

我收到此错误： 未捕获的TypeError：Window.getComputedStyle：参数1不是对象。

问题必须在这里

  1. var span = td.appendChild（document.createElement（“ SPAN”））;

和

  1. var HisWidth = getComputedStyle（document.getElementById（“ span” + i））。getPropertyValue（'width'）

在第一个代码段中，我直接获取对象ID，在第二个代码段（1.）中，它只是循环中的变量名称。 我在如何语法上正确地循环该行代码中的正确ID时遇到麻烦， 我给每个循环中的每个跨度赋予不同的ID span.setAttribute（“ id”，“ span” + i）; 但我不能只写“ td” + i。 appendChild ...

我绝对不知道第二行代码有什么问题，因为它与第一个代码段完全相同

我尝试添加

var tede = new Array（）; 函数外部

并将功能更改为

for(var i=0;i<array.length;i++,j--)
    {
    
        var tr = document.createElement('TR');
            tableBody.appendChild(tr);
        
        var td = document.createElement('TD')
        td.setAttribute("id","td"+i);
        
        tede[i]=document.getElementById("td"+i);
        var span = tede[i].appendChild(document.createElement("SPAN"));
        span.setAttribute("id","span"+i);
        
        span.appendChild(document.createTextNode(array[j-1]));
        var HisWidth = getComputedStyle(document.getElementById("span"+i)).getPropertyValue('width')
        console.log(HisWidth,span0);
        

        td.style.csstext='width:251.665px;text-align:right;font-size:14px';

        

        tr.appendChild(td);
        myTableDiv.appendChild(table)

    }

有许多不同的东西，但这似乎是一种可靠的方法，但也不起作用...：（

在紧靠table.border ='0'; 强文本之后移动 myTableDiv.appendChild（td）之后，移动 tr.appendChild（td）; ，紧随 tr.appendChild（td）; 之后，我得到计算出的宽度“自动”，而不是实际宽度... console.log（document.getElementById（“ span” + i）.style.width）;返回一个空字符串...

我随时欢迎您寻求启发，以启发我的观点=）

解决方法

function ausgabe()
{

        array.push(x,y);
        
    
        var myTableDiv = document.getElementById("Historie");
        myTableDiv.appendChild(table)
    
        tableBody.innerHTML = "";
        var j=array.length;

        var i;
        
        for(i=0;i<array.length;i++,j--)
        {
        
    
            var tr = document.createElement('TR');
                tableBody.appendChild(tr);
        
            var td = document.createElement('TD')
            td.setAttribute("id","td"+i);
            tr.appendChild(td);
            
            var span = td.appendChild(document.createElement("SPAN"));
            span.setAttribute("id","span"+i);
            
            span.appendChild(document.createTextNode(array[j-1]));
            var HisWidth = getComputedStyle(document.getElementById("span"+i)).getPropertyValue('width');
            
            td.style.cssText='width:251.665px;text-align:right;font-size:14px';
    
            if (!Number.isInteger(i/2))
            {
                td.style.cssText='width:251.665px;text-align:right;font-size: 22px;font-weight: 550';
            }
            console.log(HisWidth,span0);
            console.log(document.getElementById("span"+i).offsetWidth);
            

        }
        
        

        
}

完成这项工作...感谢Lain，在您提出要点后，只需使用正确的方法来获得宽度...

domdom-manipulationfor-loophtmljavascript