时间戳

首页 > 解决方案 > 使用 javascript for 循环在 TD 内创建跨度

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

问题描述

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

工作片段：

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: Argument 1 is not an object。

问题必须在这里：

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

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

我尝试添加

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(table) ; 强文本 和移动tr.appendChild(td); 就在tr.appendChild(td);之后 我得到计算的宽度“auto”，但不是实际宽度... console.log(document.getElementById("span"+i).style.width); 返回一个空字符串...

我愿意寻求任何帮助来启发我的观点=）

标签： javascripthtmlfor-loopdomdom-manipulation

解决方案

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，在你的观点之后，这只是使用正确的方法来获得宽度的问题......

推荐阅读