如何解决更改表标题
| 我正在寻找一种更改某些表头的方法。其中一些标头包含附加的HTML代码,例如换行符。 这是页面上表格的典型设置(页面来源):<table class=\"awesometable\" style=\"width: 100%; margin-right: 0;\">
<tr>
<th style=\"background: red; color: white;\">Male<br /> contestant</th>
<th style=\"background: red; color: white;\">Female<br /> contestant</th>
</tr>
</table>
应该将Male<br /> contestant
,Female<br /> contestant
(以及一系列其他细微变化)更改为简单符号,例如like3ѭ和♀
。
使用document.body.innerHTML.replace()
会将整个DOM替换为新节点,这是不希望的,并且还可以更改其他实例,如果表头中的文本也是纯文本并且不应更改,尽管这种情况很少见,只有一个小问题。
在其他换行符上使用选择性nodeType == 3
失败。
欢迎任何想法,总是首选代码示例(在此处或例如jsfiddle)。谢谢。
解决方法
我建议使用jQuery,因为它在处理DOM时非常友好。还要注意,它可能会稍微快一些-如果您有一个大表可能会很重要-在对字符串完成所有操作之前,不要为ѭ7分配任何内容。也就是说,将
contestant \”)。这里的例子。 编辑: 并纠正以下示例:
innerHTML
的值存储在变量中,运行replace
函数,然后将结果放回innerHTML
中。 (还要注意,我用ѭ12替换了ѭ11。至少在Chrome中,ѭ7会将XHTML封闭的单个标签转换为有效的HTML,这里是ѭ12)。)
这是一个更可扩展的方法(jsFiddle示例):
var replacements = [
[\"Male<br>contestant\",\"♂\"],[\"Female<br>contestant\",\"♀\"]
];
function runReplacement() {
$(\".awesometable th\").each(function() {
var $this = $(this);
var ih = $this.html();
$.each(replacements,function(i,arr) {
ih = ih.replace(arr[0],arr[1]);
});
$this.html(ih);
});
}
除了上述内容外,您还可以使用.text()
而不是(17ѭ,而只需忽略每个单元格的<br>
部分(例如,用\“ Malecontestant \”代替\“ Male contestant \”)。这里的例子。 编辑: 并纠正以下示例:
var headers = document.getElementsByTagName(\"th\");
for (var i = 0; i < headers.length; i++) {
headers[i].innerHTML = headers[i].innerHTML.replace(\"Male<br>contestant\",\"♂\")
.replace(\"Female<br>contestant\",\"♀\");
}
对于像专注于简洁性(短70个字符,忽略多余的空白)这样的愚蠢行为:
$(\"th\").each(function(){$(this).html($(this).html()
.replace(\"Male<br>contestant\",\"♂\").replace(\"Female<br>contestant\",\"♀\"));});
, 像什么问题
function replace(text)
{
return text.replace(\'Male\',\'♂\').replace(\'Female\',\'♀\');
}
var ths = document.getElementById(\'myTable\').getElementsByTagName(\'th\'),i = ths.length,th,text;
while (i-- && (th = ths[i],text = th.innerText))
{
if (text)
{
// IE,Safari,Chrome,Opera
th.innerText = replace(text);
}
else
{
// Everything but IE <9
th.textContent = replace(th.textContent);
}
}
根据要求,jsFiddle:http://jsfiddle.net/mattball/4EwGt/
是的,innerText || textContent
是PITA。
我想替换整个标题,分别为Male<br /> contestant
和Female<br /> contestant
,而不仅是第一个单词,并且在示例中尝试整体不起作用。似乎只是删除换行符,不更改文本。
使用此替换功能代替:
function replace(text)
{
return text.replace(\'Male\\ncontestant\',\'♂\')
.replace(\'Female\\ncontestant\',\'♀\');
}
演示:http://jsfiddle.net/mattball/8W3cM/
, 尝试这个:
var headers = document.getElementsByTagName(\'th\');
headers[0].innerHTML = \'♂\';
headers[1].innerHTML = \'♀\';
显示概念。最好给各个单元格一个ID或类来标识它们,而不要使用内容。您还可以执行以下操作:
var cell,headers = document.getElementsByTagName(\'th\');
for (var i=0,iLen=headers.length; i<iLen; i++) {
cell = headers[i];
if (cell.innerHTML.match(\'Male\') ) {
cell.innerHTML = \'♂\';
}
else if (cell.innerHTML.match(\'Female\')) {
cell.innerHTML = \'♀\';
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。