个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在使用 Javascript 动态创建一个表格，并希望在每行的开头创建一个标题样式的单元格。所以我的问题是我该如何做到这一点，如 insertCell只创建一个正常的<td>元素而不是 <th> .
我尝试过的一些方法(通过 w3schools 的 Tryit 编辑器；我没有理由怀疑任何其他用法会有不同的行为)但没有成功:
我看到了创建 <th> 的建议独立元素，然后将其添加到 <tr>元素作为一个 child 。但是，当我这样做时，它不会添加为表格单元格，即它不受表格边框的影响，不计入单元格数组(即，如果您执行 insertCell(1) ，它会插入到第一个单元格之后，而不是计算 <th> )，并且没有获得 <th> 的特殊粗体/中心格式。细胞。
我尝试使用insertCell制作一个虚拟电池，然后 replaceChild拥有独立创建的细胞；这与上面的结果相同。
我尝试制作 <td>单元格通过 insertCell 并简单地加粗并手动居中，但是 myCell.style.fontWeight="bold"和myCell.align="center"似乎不起作用(它们只是结束函数，就像 JavaScript 中的错误命令一样)，同样尝试使用 CSS 也不起作用。所以也许我只是语法不好或者什么的，但我不知道该怎么做。任何帮助将不胜感激。
尝试1:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to insert new cell(s) at the end of the table row.</p>
<table border="1">
<th>1</th>
<td>2</td>
</tr>
<tr id="myRow">
</tr>
<tr>
</table><br>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var newRow = document.getElementById("myRow");
var header=document.createElement("th").appendChild(document.createTextNode("a"));
newRow.appendChild(header);
var enablesLoc=newRow.insertCell(0).appendChild(document.createTextNode("b"));
}
</script>
</body>
</html>
结果:“1”为粗体，有边框，“2”和“b”为非粗体，有边框(它们应该是这样)，“a”为非粗体，没有边框。
尝试2:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to insert new cell(s) at the end of the table row.</p>
<table border="1">
<th>1</th>
<td>2</td>
</tr>
<tr id="myRow">
</tr>
<tr>
</table><br>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var newRow = document.getElementById("myRow");
var header=newRow.insertCell(0).appendChild(document.createTextNode("a"));
header.style.fontWeight="bold";
var enablesLoc=newRow.insertCell(1).appendChild(document.createTextNode("b"));
}
</script>
</body>
</html>
结果:按钮添加单元格“a”(未加粗)，但不添加单元格“b”。
最佳答案
以下代码显示了您可以使用的所有内容:
function addTable(){
var table = document.createElement("table");
var tr = document.createElement("tr");
var th = document.createElement("th");
var td = document.createElement("td");
td.innerText = "im a td";
th.innerText = "im a th";
tr.appendChild(th);
tr.appendChild(td);
table.appendChild(tr);
var out = document.getElementById("out");
out.appendChild(table);
}
您必须调用该函数和一个 id 为 <div id=out>...</div> 的 div必须在文档中。 免责声明:我只在 Chrome 中测试了此代码
您写了I've seen a suggestion to create the <th> element independently and then add it to the <tr> element as a child. When I do this
it is not added as a table cell你这是什么意思以及你使用什么命令，is not affected by the table border原因可能是因为它不包含文本，does not count toward the array of cells (i.e. if you do insertCell(1)我也不明白这一点。根据insertCell上的规范它插入一个空的 td并返回一个引用。所以 insertCell 没有数组，如果你尝试 var table = document.getElementById("myTable")然后table.rows[0].cells.length它返回包括 th 在内的单元格数量-细胞。it inserts after the first cell not counting the th根据我的测试，至少在 Chrome 中情况并非如此；这取决于您如何调用该方法:table.rows[1].insertCell(-1);在第二行(从零开始的数组)末尾添加一个单元格和 table.rows[2].insertCell(1);如果您使用 table.rows[3].insertCell(0);，则在第三行的位置 2 上添加一个单元格(同样从零开始)单元格插入到第四个单元格中。行在开头，and does not get the special bold/center format for a th cell我也不是这样的免责声明:我只在 Chrome 中测试了此代码
html
<button onclick="addRow()">add rows</button><br />
<button onclick="addColumn()">add column</button>
<table border="1" id="myTable">
<tr>
<th>1</th>
<td>2</td>
</tr>
</table>
还有 JavaScript
function addRow()
{
var table = document.getElementById("myTable");
var tr = document.createElement("tr");
var th = document.createElement("th");
var td = document.createElement("td");
td.innerText = "im a td";
th.innerText = "im a th";
tr.appendChild(th);
tr.appendChild(td);
table.appendChild(tr);
}
function addColumn(){
var table = document.getElementById("myTable");
var rows = table.rows;
console.log("rows", rows);
for (var i = 0; i < rows.length; ++i) {
// td = rows[i].cells;
var td = document.createElement("td");
td.innerText = i;
rows[i].appendChild(td);
}
}
基于DOM Level 2 HTML 您不能使用insertCell因为它Insert[s] an empty TD cell into this row 。但你想添加一个th根据DOM Level 3 Core 您可以使用appendChild因为它adds the node newChild to the end of the list of children of this node. If the newChild is already in the tree, it is first removed.
因此，您必须以正确的顺序创建元素:创建行，将第一个单元格添加为 th然后添加其他单元格为 td通过使用追加子项。
关于javascript - 如何使用 Javascript 动态创建(或伪造)一个 <th> 单元格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20865146/
24
4
0
我已经尝试在我的 CSS 中添加一个元素来删除每三个 div 的 margin-right。不过，似乎只是出于某种原因影响了第 3 次和第 7 次。需要它在第 3、6、9 等日工作... CSS .s
如何使 div/input 闪烁或“脉冲”？例如，假设表单字段输入了无效值？ 最佳答案 使用 CSS3 类似 on this page ，您可以将脉冲效果添加到名为 error 的类中: @-webk
我目前正在尝试构建一个简单的 wireframe来自 lattice 的情节包，但由沿 y 轴的数百个点组成。这导致绘图被线框网格淹没，您看到的只是一个黑色块。我知道我可以用 col=FALSE 完全
在知道 parent>div CSS 选择器在 IE 中无法识别后，我重新编码我的 CSS 样式，例如: div#bodyMain div#paneLeft>div{/*styles here*/}
我有两个 div，一个在另一个里面。当我将鼠标悬停 到最外面的那个时，我想改变它的颜色，没问题。但是，当我将鼠标悬停 到内部时，我只想更改它的颜色。这可能吗？换句话说，当 将鼠标悬停到内部 div 上
我需要展示这样的东西 有人可以帮忙吗？我可以实现以下输出 我正在使用以下代码:: GridView.builder( scrollDirection: Axis.vertical,
当 Bottom Sheet 像 Android 键盘一样打开时，是否有任何方法可以手动上推布局( ScrollView 或回收器 View 或整个 Activity )？或者你可以说我想以 Bott
我有以下代码，用于使用纯 HTML 和 CSS 显示翻转。当您将鼠标悬停在文本上时，它会更改左右图像。 在我测试的所有浏览器中都运行良好，Safari 4 除外。据我收集的信息，Safari 4 支持
我构建了某种 CMS，但在使用 TinyMCE 和 Bootstrap 时遇到了一些问题。 我有一个页面，其中概述了一个 div，如果用户单击该 div，他们可以从模态中选择图像。该图像被插入到一个
出于某种原因，当我设置一个过渡时，当我的鼠标悬停在一个元素上时，背景会改变颜色，它只适用于一个元素，但它们都共享同一个类？任何帮助我的 CSS .outer_ad { position:rel
好吧，这真的很愚蠢。我不知道 Android Studio 中的调试监视框架发生了什么。我有 1.5.1 的工作室。 是否有一些来自 intellij 的 secret 知识来展示它。 最佳答案 与以
我有这个标记: some code > 我正在尝试获取此布局: 注意:上一个和下一个按钮靠近#player 我正在尝试这样: .nextBtn{
网站:http://avuedesigns.com/index 首页有 6 个菜单项。我希望每件元素在您经过时都有自己的颜色。 这是当您将鼠标悬停在 div 上时将所有内容更改为白色的行 li#hom
我需要在 index.php 文件中显示它，但没有任何效果。我所有的文章都没有正确定位。我将其用作代码: 最佳答案 您可以首先检查您
我是一名优秀的程序员,十分优秀！