Question

这是我桌子的一部分：

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.13为红色。

这是我试图做的，但是没有用：

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';
            }
        }
    }
}

简单地说：这段代码所做的基本上是一些预格式化，并基本上确定要赋予特定单元格的颜色。但是在这种特定情况下，我需要为单元中的特定信息着色，而不是整个单元。

Answer 1

据我所知，您无法为文本的特定部分设置样式。由于您说您无权更改源HTML，因此您将被迫操纵DOM。试试这个：

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元素，则需要对选择器进行更具体的说明。

Answer 2

我认为这是一个很棒的问题。

这个想法是用反斜杠分割字符串，然后用特定的标签将其包装（包含样式）。

这里是示例：

$('table td').each(function() {
  var str = $(this).html();
  var arr = str.split("\\");
  var el1 = '<span class="green">' + arr[0] + '</span>';
  var el2 = '<span class="red">' + arr[1] + '</span>';
  // Replace current column
  $(this).html(el1 + '\\' + el2);
});

您可以编写一个简单的CSS样式：

.green {
  color: green;
}
.red {
  color: red;
}

对于示例结果，只需转到https://jsfiddle.net/ngekoding/Lmjpx014/10/

希望这会有所帮助。

Answer 3

您可以尝试嵌套for循环，以击中每个单元格，并用添加的span标签替换文本，这些标签可以分别为文本着色。我确定这有效，并且绝对对我有效：

<!--This Is The Demo Table, Fake Values and different slashes were used to display different results -->
<table>
    <tr>
        <td>red/blue</td>
        <td>blue\green</td>
    </tr>
    <tr>
        <td>hello\pink</td>
        <td>bad\\yellow</td>
        <td>hello\bye</td>
    </tr>
</table>
<!--The Actual JS Starts Here-->
<script type="text/javascript">
    //GLOBAL VARS
    //This one represents all TR Tags in the document
    var tr = document.getElementsByTagName("tr");
    //For all TR Tags, do...
    for (var i = 0; i < tr.length; i++) {
        //Create a Variable, representing all TD Tags inside current TR tag being scanned
        var nestedTD = tr[i].getElementsByTagName("td");
        //For All TD Tags Inside Current TR Tag, do...
        for (var j = 0; j < nestedTD.length; j++) {
            //If The InnerHTML Of Each Tag Contains the "\" Character...
            if (nestedTD[j].innerHTML.includes("\\")) {
                //Then Split The InnerHTML Value Based on "\" (It returns array with ["text", "", "text"])
                var splitContentList = nestedTD[j].innerHTML.split("\\");
                //Replace the InnerHTML with a green and a red span tag, wrapping the texts
                nestedTD[j].innerHTML = "<span style='color: green;'>" + String(splitContentList[0]) + "</span>" + "\\" + "<span style='color: red;'>" + String(splitContentList[2]) + "</span>";
            }
        }
    }
</script>

此代码花费了我很多精力，请不要讨厌它的约定！！我真的希望这会有所帮助！

在不使用RegExp

3 个答案: