Question

我遇到了这个问题：我有一个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>

但它们都不起作用.. 我该怎么办？

Answer 1

metode1可以使用，但是元素中的初始文本在0的任意一侧都有空格，因此>无法将其隐式转换为数字。如果删除空格（在标记中，或在现代浏览器上执行.innerHTML.trim()），则从字符串到数字的隐式转换将起作用。您可能会考虑明确转换，但您仍需要修剪。

实例，标记中删除了空格：

＆＃13;

function metode1() {
  if (document.getElementById("room1").innerHTML > 0) {
    document.getElementById("room1").innerHTML = 0;
  } else {
    document.getElementById("room1").innerHTML = 1;
  }
}

＆＃13;

<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>

＆＃13;

直播示例使用trim：

＆＃13;

function metode1() {
  if (document.getElementById("room1").innerHTML.trim() > 0) {
    document.getElementById("room1").innerHTML = 0;
  } else {
    document.getElementById("room1").innerHTML = 1;
  }
}

＆＃13;

<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>

＆＃13;

请注意，ECMAScript5（2009）中添加了trim，因此可能不会出现在某些较旧的JavaScript引擎上。但是，它很容易变暗。

Answer 2

试试这个 -

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

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

2 个答案: