如何解决使用javascript for循环在TD内部创建跨度
我想使用循环将<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不是对象。
问题必须在这里
- var span = td.appendChild(document.createElement(“ SPAN”));
和
- 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,在您提出要点后,只需使用正确的方法来获得宽度...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。