如何在单元格中创建变量表?

时间:2012-02-24 22:51:56

标签: javascript html button html-table

我在一个单元格中有一个表格,显示用户用按钮输入的数字(使用onclick和showthis函数。我需要能够将值存储为变量以便对其执行操作。我怎么能这样做?
 PS:我使用的是JavaScript和HTML

<script language="JavaScript" type="text/javascript"> 
    function showthis(first){ 
        document.getElementById("displaycell").innerHTML+=first; 
    } 
</script>
<body> 
  <h1 align="center"> RPN Calculator </h1>
  <table summary align="center" border="1" cellpadding="1" cellspacing="3">
    <tr>
      <th id="displaycell" colspan="5" type="text"> </td>
    </tr>
    <tr>
      <td>
        <button type="button" onclick="showthis('1')">1</button>
      </td>
      <td>
        <button type="button" onclick="showthis('2')">2</button>
      </td>
      <td>
        <button type="button" onclick="showthis('3')">3</button>
     </td>
     <!-- ... -->

2 个答案:

答案 0 :(得分:2)

首先,您不应将+=innerHTML一起使用。这意味着您最终会将数字附加到单元格的内部值而不是覆盖它。

function showthis ( number ) {
    var cell = document.getElementById('displaycell');
    cell.innerHTML = "";
    cell.appendChild( document.createTextNode( number ));
}

处理这种情况会更好。

接下来,在showthis中,您最好将值存储在变量中,以便将来可以直接从javascript访问它。

var displayStore = 0;

function showthis ( number ) {
    var cell = document.getElementById('displaycell');
    cell.innerHTML = "";
    cell.appendChild( document.createTextNode( number ));

    // you can either do this in a variable local to the <td> DOM Object like so
    cell.currentDisplayNumber = number;

    //or in a global variable like so
    displayStore = number;
}

最后,要再次访问该变量,您可以从displaystore <td>中读取该变量,也可以从变量中读取该变量。

function DoStuff0 () {
    var number = Number( document.getElementById( 'displaycell' )).innerHTML;
    // rest
}

function DoStuff1 () {
    var number = document.getElementById('displaycell').currentDisplayNumber;
    // rest
} 

function DoStuff2 () {
    var number = displayStore;
    // rest
}

答案 1 :(得分:0)

这是你想要的吗? http://jsfiddle.net/CWQY2/

HTML:

<h1 align="center"> RPN Calculator </h1>
<table summary align="center" border="1" cellpadding="1" cellspacing="3">
    <tr>
        <th id="displaycell" colspan="5"> </th> 
    </tr> 

    <tr> 
        <td> <button type="button" onClick="showthis('1')">1</button> </td> 
        <td> <button type="button" onClick="showthis('2')">2</button> </td> 
        <td> <button type="button" onClick="showthis('3')">3</button> </td>
    </tr>
</table>

JS:

function showthis(first){ 
    document.getElementById("displaycell").innerHTML += first; 
}
​