用戶輸入表javascript

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

來源

2017-05-18 Soda Adlmayer

這裏是您的解決方案：

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

來源

2017-05-18 12:38:19

謝謝，這偉大工程。只是一個簡單的問題，是爲了使輸出ID與輸入不同而將id與「t」結合起來？ –

對不起，我沒有得到你？ –

我在問這是什麼行 'document.getElementById（「t」+ tableID）.innerHTML = n.value;' 但我的問題現在已經回答了prasad –

試試這個。你可以改變你的HTML onclick=writeTable('targetlementid',this)。而且不使用一些身份證都input和td。因爲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>

來源

2017-05-18 12:19:57 prasanth

用戶輸入表javascript

回答

相關問題