HTML JavaScript -通过ID更改单元格中的信息

HTML JavaScript - changing info in cell by ID

本文关键字：单元格 信息 JavaScript -通过 ID HTML      更新时间：2023-09-26

我有这个问题:我有一个HTML表格，我想通过Javascript编辑。表信息包含值为0或1的房间。我有两个可以改变单元格的按钮，它们可以将值设置为1或0，但我想要一个连接到一个按钮的函数，它可以改变值，当1变为0,0变为1。

我发现的一个解决方案是给每个单元格一个ID并更改它，另一个是使用表中的行/单元格。

<table id="table1">
    <table border="1" cellpadding="1" cellspacing="3">
        <tr>    
            <td> Room </td>
            <td> Status </td>   
        </tr>
        <tr>
            <td> r1 </td>
            <td id="room1"> 0 </td>
        </tr>
        <tr>
            <td> r2 </td>
            <td> 0 </td>
        </tr>
        <tr>
            <td> r3 </td>
            <td> 1 </td>
        </tr>

目前我已经尝试了:

<button type="button" onclick="metode1()">Room 1 => 0/1</button>
<button type="button" onclick="metode2()">Room 1 => 0</button>
    <script>
        function metode1(){         
            if(document.getElementById("room1").innerHTML > 0) {
                document.getElementById("room1").innerHTML = 0;
            } 
            else {
                document.getElementById("room1").innerHTML = 1;
            } 
        }
        function metode2(){
            document.getElementById("table1").rows[1].cells[1].innerHTML = 0;
        }  
    </script>

但是他们都不工作…我能做什么?

metode1可以工作，但是元素中的初始文本在0的两侧都有空格，因此>不能隐式地将其转换为数字。如果删除空格(在标记中，或者在现代浏览器中执行.innerHTML.trim())，则从字符串到数字的隐式转换将正常工作。您可能会考虑显式转换，但您仍然需要修剪。

实例去掉标记中的空格:

function metode1() {
  if (document.getElementById("room1").innerHTML > 0) {
    document.getElementById("room1").innerHTML = 0;
  } else {
    document.getElementById("room1").innerHTML = 1;
  }
}
<table border="1" cellpadding="1" cellspacing="3">
  <tr>
    <td>Room</td>
    <td>Status</td>
  </tr>
  <tr>
    <td>r1</td>
    <td id="room1">0</td>
  </tr>
  <tr>
    <td>r2</td>
    <td>0</td>
  </tr>
  <tr>
    <td>r3</td>
    <td>1</td>
  </tr>
</table>
<button type="button" onclick="metode1()">Room 1 => 0/1</button>

使用trim:

的实例

function metode1() {
  if (document.getElementById("room1").innerHTML.trim() > 0) {
    document.getElementById("room1").innerHTML = 0;
  } else {
    document.getElementById("room1").innerHTML = 1;
  }
}
<table border="1" cellpadding="1" cellspacing="3">
  <tr>
    <td>Room</td>
    <td>Status</td>
  </tr>
  <tr>
    <td>r1</td>
    <td id="room1"> 0 </td>
  </tr>
  <tr>
    <td>r2</td>
    <td>0</td>
  </tr>
  <tr>
    <td>r3</td>
    <td>1</td>
  </tr>
</table>
<button type="button" onclick="metode1()">Room 1 => 0/1</button>

注意trim是在ECMAScript5(2009)中添加的，所以可能不会在一些旧的JavaScript引擎上。不过，它很容易闪烁。

试试这个-

<button type="button" onclick="metode1()">Room 1 => 0/1</button>
function metode1(){         
            if(document.getElementById("room1").innerHTML.trim() =="1") {
                document.getElementById("room1").innerHTML = 0;
            } 
            else {
                document.getElementById("room1").innerHTML = 1;
            } 
        }
相关文章：