这是我表格的一部分:
index.php
<tr>
<th>data_uwr</th>
<td>-1.413\-5.113</td>
<td>-3.314\-3.650</td>
<td>-0.001\-0.010</td>
<td>-1.052\-1.052</td>
<td>-1.052\-1.052</td>
</tr>
如您所见,每个单元格都有 2 个由反斜杠分隔的数字。 我能以某种方式为这两个数字分别应用不同的颜色吗?例如,在第一个 <td>
中, -1.413 为绿色,-5.113 为红色。
这是我尝试做的,但没有成功:
index.js
// This is how I get the row. What this code does is it colors the entire cell - everything in the cells becomes green.
mainTable.rows[rowNumber].cells[numOfRunsToCompute].style.color = 'green';
// Then I tried splitting cell content into an array (of strings), and coloring each string - each number became a string
let test = mainTable.rows[rowNumber].cells[numOfRunsToCompute].firstChild.textContent.split('\\');
test[0].fontcolor('green');
我用了这个fontcolor()方法,但没有用。由于 String 不是 DOM 元素,我不确定如何为它着色。
编辑:我的问题与this 不重复.我不打算使用 RegExp,主要是因为在我的案例中很难定义模式。有成千上万的数字是我无法预测的。着色是根据公式完成的(为简单起见,我没有在此处包含)。
编辑 2:
这是我的函数中的一段代码(您可能认为某些变量未声明等,但请注意,为简单起见,这是一个截取的代码段):
for (let numOfRunsToCompute = 2; numOfRunsToCompute < runs; numOfRunsToCompute++) {
let baseline = mainTable.rows[rowNumber].cells[1].firstChild.textContent;
let newCellValue = mainTable.rows[rowNumber].cells[numOfRunsToCompute].firstChild.textContent;
let splitBaseline = baseline.split('\\');
let splitNewCellValue = newCellValue.split('\\');
for (let i = 0; i < splitBaseline.length; i++) {
let numBaseline = Math.abs(splitBaseline[i]);
let numNewCellValue = Math.abs(splitNewCellValue[i]);
if (numBaseline >= flagNum) {
let greenCell = numBaseline * greenNum;
let orangeCell = numBaseline * orangeNum;
if (numNewCellValue >= 0 && numNewCellValue < greenCell) {
// For example, this is where I need to apply those colors
mainTable.rows[rowNumber].cells[numOfRunsToCompute].style.color = 'green';
} else if (numNewCellValue >= greenCell && numNewCellValue <= orangeCell) {
mainTable.rows[rowNumber].cells[numOfRunsToCompute].style.color = 'orange';
} else {
mainTable.rows[rowNumber].cells[numOfRunsToCompute].style.color = 'red';
}
} else {
let greenCell = numBaseline + greenOrangeWorse;
let orangeCell = greenCell + greenOrangeWorse;
if (numNewCellValue >= 0 && numNewCellValue < greenCell) {
mainTable.rows[rowNumber].cells[numOfRunsToCompute].style.color = 'green';
} else if (numNewCellValue >= greenCell && numNewCellValue < orangeCell) {
mainTable.rows[rowNumber].cells[numOfRunsToCompute].style.color = 'orange';
} else {
mainTable.rows[rowNumber].cells[numOfRunsToCompute].style.color = 'red';
}
}
}
}
简单地说:这段代码所做的基本上是一些预格式化,并基本上确定为特定单元格指定哪种颜色。但在这种特定情况下,我需要为单元格中的特定信息片段着色,而不是整个单元格。
最佳答案
据我所知,您无法为特定文本部分设置样式。您将被迫操作 DOM,因为您说过您无权更改源 HTML。试试这个:
var color1 = 'green'; // or '#008000'
var color2 = 'red'; // or '#ff0000'
var tds = document.getElementsByTagName('td');
for (i = 0; i < tds.length; i++) {
var td = tds[i];
var numbers = td.innerHTML.split('\\');
td.innerHTML = `
<span style="color:` + color1 + `">` + numbers[0] + `</span>
\\
<span style="color:` + color2 + `">` + numbers[1] + `</span>
`;
};
此代码遍历您的 td
元素并解析出单元格中已有的每个数字,然后插入 span
元素代替每个数字,其中 span
使用 CSS 着色。
当然,如果除了需要操作的元素之外,页面上还有更多的 td
元素,则需要更具体地选择选择器。
关于javascript - 在不使用 RegExp 的情况下访问和着色 HTML 表格单元格中的特定文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52750175/