用户输入表javascript

时间:2017-05-18 12:12:29

标签: javascript html

我一直在尝试根据用户输入创建一个表,但是,当退出输入字段时,我无法运行cell id的writeTable函数。我认为这是函数的语法错误,但我无法在线找到解决方案。

JAVASCRIPT

<script>
    function writeTable(tableID) {
        var n = document.getElementById("tableID");
        document.getElementById("tableID").innerHTML = n;
    }
</script>

HTML

<!-- INPUT TABLE -->
<table>
    <tr>
        <th>Angle (c)</th>
        <th>Voltage - Test 1</th>
        <th>Voltage - Test 2</th>
        <th>Voltage - Test 3</th>
        <th>Voltage - Test 4</th>
    </tr>
    <tr>
        <th> 0 </th>
        <th> <input id="00" onblur="writeTable(00)" type="text"> </th>
        <th> <input id="10" onblur="writeTable(10)" type="text"> </th>
        <th> <input id="20" onblur="writeTable(20)" type="text"> </th>
        <th> <input id="30" onblur="writeTable(30)" type="text"> </th>
    </tr>
    <tr>
        <th> π/12 </th>
        <th> <input id="01" onblur="writeTable(01)" type="text"> </th>
        <th> <input id="11" onblur="writeTable(11)" type="text"> </th>
        <th> <input id="21" onblur="writeTable(21)" type="text"> </th>
        <th> <input id="31" onblur="writeTable(31)" type="text"> </th>
    </tr>
</table>
<!-- DISPLAY TABLE -->
<table>
    <tr>
        <th>Angle (c)</th>
        <th>Voltage - Test 1</th>
        <th>Voltage - Test 2</th>
        <th>Voltage - Test 3</th>
        <th>Voltage - Test 4</th>
    </tr>
    <tr>
        <th> 0 </th>
        <th id="00"></th>
        <th id="10"></th>
        <th id="20"></th>
        <th id="30"></th>
    </tr>
    <tr>
        <th> π/12 </th>
        <th id="01"> </th>
        <th id="11"></th>
        <th id="21"></th>
        <th id="31"></th>
    </tr>
</table>

2 个答案:

答案 0 :(得分:0)

试试这个。你可以更改你的html onclick=writeTable('targetlementid',this)。并且不要为inputtd使用一些ID。因为id是唯一的。所以区分td输入ID。就像在t之前添加td id="t00"一样

&#13;
&#13;
function writeTable(tableID,that) {
  document.getElementById('t'+tableID).innerHTML = that.value;
}
&#13;
<table>
  <tr>
    <th>Angle (c)</th>
    <th>Voltage - Test 1</th>
    <th>Voltage - Test 2</th>
    <th>Voltage - Test 3</th>
    <th>Voltage - Test 4</th>
  </tr>
  <tr>
    <th> 0 </th>
    <th> <input id="00" onblur="writeTable('00',this)" type="text"> </th>
    <th> <input id="10" onblur="writeTable('10',this)" type="text"> </th>
    <th> <input id="20" onblur="writeTable('20',this)" type="text"> </th>
    <th> <input id="30" onblur="writeTable('30',this)" type="text"> </th>
  </tr>
  <tr>
    <th> π/12 </th>
    <th> <input id="01" onblur="writeTable('01',this)" type="text"> </th>
    <th> <input id="11" onblur="writeTable('11',this)" type="text"> </th>
    <th> <input id="21" onblur="writeTable('21',this)" type="text"> </th>
    <th> <input id="31" onblur="writeTable('31',this)" type="text"> </th>
  </tr>
</table>
<!-- DISPLAY TABLE -->
<table>
  <tr>
    <th>Angle (c)</th>
    <th>Voltage - Test 1</th>
    <th>Voltage - Test 2</th>
    <th>Voltage - Test 3</th>
    <th>Voltage - Test 4</th>
  </tr>
  <tr>
    <th> 0 </th>
    <th id="t00"></th>
    <th id="t10"></th>
    <th id="t20"></th>
    <th id="t30"></th>
  </tr>
  <tr>
    <th> π/12 </th>
    <th id="t01"> </th>
    <th id="t11"></th>
    <th id="t21"></th>
    <th id="t31"></th>
  </tr>
</table>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

以下是您的解决方案:

if (isNaN(value)) { ... }