Question

我的表中的数据随单击按钮而变化。我希望这些项目如果为负则变为红色，如果为正则变为绿色。你能帮我怎么做吗？

var lastpr = 100

function act1(){
  const tds =document.querySelector("table").querySelectorAll("tr")[Math.floor(Math.random() * 3)+0].querySelectorAll("td");
    

tds.forEach((item) => {
  item.innerHTML = ((Math.floor(Math.random() * 10)-5)/lastpr)*100;
        });
}

<div>
<table class="table1" style="width:100%;font-weight:bold ;font-size:13px;text-align:center; border: 1px solid black;">
        <tr>
             <td>1</td>
             <td>1</td>
             <td>1</td>
             <td>1</td>
        </tr>
        <tr>
             <td>2</td>
             <td>2</td>
             <td>2</td>
             <td>2</td>
        </tr>
        <tr>
             <td>3</td>
             <td>3</td>
             <td>3</td>
             <td>3</td>
        </tr>           
</table>
</div>
<button onclick="act1()">change</button>

Answer 1

您可以检查值变量是正值还是负值。然后在条件内可以设置值。

var lastpr = 100

function act1() {
  const tds = document.querySelector("table").querySelectorAll("tr")[Math.floor(Math.random() * 3) + 0].querySelectorAll("td");


  tds.forEach((item) => {
    var value = ((Math.floor(Math.random() * 10) - 5) / lastpr) * 100;
    item.innerHTML = value;
    if (value > 0){
      item.style.backgroundColor = "green";
    }else{
      item.style.backgroundColor = "red";
    }
    
  });
}

<div>
  <table class="table1" style="width:100%;font-weight:bold ;font-size:13px;text-align:center; border: 1px solid black;">
    <tr>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3</td>
      <td>3</td>
      <td>3</td>
    </tr>
  </table>
</div>
<button onclick="act1()">change</button>

Answer 2

var lastpr = 100

function act1(){
  const tds =document.querySelector("table").querySelectorAll("tr")[Math.floor(Math.random() * 3)+0].querySelectorAll("td");
 
  tds.forEach((item) => {
    const value = ((Math.floor(Math.random() * 10)-5)/lastpr)*100;
    item.innerHTML = value;
    item.style.backgroundColor = value < 0 ? 'red' : 'green'
  });
}

<div>
<table class="table1" style="width:100%;font-weight:bold ;font-size:13px;text-align:center; border: 1px solid black;">
        <tr>
             <td>1</td>
             <td>1</td>
             <td>1</td>
             <td>1</td>
        </tr>
        <tr>
             <td>2</td>
             <td>2</td>
             <td>2</td>
             <td>2</td>
        </tr>
        <tr>
             <td>3</td>
             <td>3</td>
             <td>3</td>
             <td>3</td>
        </tr>           
</table>
</div>
<button onclick="act1()">change</button>

Answer 3

您可以将值包装在<span>标记中并应用一个类。

var lastpr = 100;

function act1() {
  const tds = document.querySelector("table")
    .querySelectorAll("tr")[Math.floor(Math.random() * 3) + 0]
    .querySelectorAll("td");

  tds.forEach((item) => {
    const
      prevValue = item.textContent,
      newValue = ((Math.floor(Math.random() * 10) - 5) / lastpr) * 100;
    item.innerHTML = `
      <span class="${newValue > 0 ? 'pos' : 'neg'}">
        ${newValue}
      </span>
    `;
  });
}

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

.table1 {
  width: 100%;
  font-weight: bold;
  font-size: 13px;
  text-align: center;
  border: 1px solid black;
}

<div>
  <table class="table1">
    <tr>
      <td>1</td>
      <td>1</td>
      <td>1</td>
      <td>1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>2</td>
      <td>2</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>3</td>
      <td>3</td>
      <td>3</td>
    </tr>
  </table>
</div>
<button onclick="act1()">change</button>

根据值更改文本颜色

3 个答案: