2017-05-18 47 views
-1

我一直在尝试根据用户输入制作表格,但是,当输入字段退出时,我无法运行单元ID的writeTable函数。我认为这是函数的语法错误,但我无法在线找到解决方案。用户输入表javascript

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> 

回答

0

这里是您的解决方案:

<!-- 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="0" 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="1" 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="t0"></th> 
      <th id="t10"></th> 
      <th id="t20"></th> 
      <th id="t30"></th> 
     </tr> 
     <tr> 
      <th> 12 </th> 
      <th id="t1"> </th> 
      <th id="t11"></th> 
      <th id="t21"></th> 
      <th id="t31"></th> 
     </tr> 
    </table>  

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

谢谢,这伟大工程。只是一个简单的问题,是为了使输出ID与输入不同而将id与“t”结合起来? –

+0

对不起,我没有得到你? –

+0

我在问这是什么行 'document.getElementById(“t”+ tableID).innerHTML = n.value;' 但我的问题现在已经回答了prasad –

0

试试这个。你可以改变你的HTML onclick=writeTable('targetlementid',this)。而且不使用一些身份证都inputtd。因为ID是唯一的。所以区分td从输入id。只需加t之前td id="t00"

function writeTable(tableID,that) { 
 
    document.getElementById('t'+tableID).innerHTML = that.value; 
 
}
<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>