2017-05-12 6 views
0

どうか私を助けてください。私はJavaScriptに新しいです。ユーザーがjavascriptとhtmlを使用して行を選択したときに、フォーム自体にテーブルエントリが削除されます。 削除機能を試しましたが、見出しも削除します。ユーザーは行を選択し、削除する必要があります。htmlとjavascriptのテーブルエントリを削除するには

htmlコード:

<body> 
    <form> 
     <h2>Receipt</h2> 
     <table> 
      <tr> 
       <td> 
        <label for="ctype">Charge Type</label> 
       </td> 
       <td> 
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        <input id="ctype" name="ctype" placeholder="--" style="border: none;" type="text" /> 
       </td> 
      </tr> 

      <tr> 
       <td> 
        <label for="amt">Amount</label> 
       </td> 
       <td> 
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        <input id="amt" name="amt" placeholder="--" style="border: none;" type="text" /> 
       </td> 
      </tr> 

      <tr> 
       <td> 
        <label for="camt">Cash Amount</label> 
       </td> 
       <td> 
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
        <label>100</label> 
       </td> 
      </tr> 
     </table> 
     <br><input type="reset" name="reset" id="resetbtn" style="border: none; height:30px; width:100px;" class="resetbtn" value="Reset" />&nbsp;&nbsp; 
     <button type="button" style="border: none; height:30px; width:100px;" onClick="updateForm();"/>Add To Table</button>&nbsp;&nbsp; 
     <button type="button" style="border: none; height:30px; width:100px;" onClick="saveForm()" />Save</button> 
     <button type="button" style="border: none; height:30px; width:100px;" onClick="deletRow()" />Remove</button> 
    </form> 
    <br> 

    <table id="results" width="360"> 
     <thead> 
     <tr> 
      <th scope="col" width="120">Charge Type</th> 
      <th scope="col" width="120">Amount</th> 
     </tr> 
     </thead> 
    </table> 

    <table id="resultTotals" width="360"> 
    <tr> 
     <td scope="col" width="120">Totals</td> 
     <td scope="col" width="120"><div id="amtTotals"></div></td> 
    </tr> 
    </table> 

</body> 

Javascriptコード:

<script> 
    var amtTotal = 0; 

     function updateForm() { 
      var ctype = document.getElementById("ctype").value; 
      var amt = document.getElementById("amt").value; 
      amtTotal = amtTotal + parseInt(amt); 
      document.getElementById("amtTotals").innerHTML=amtTotal; 

      var table=document.getElementById("results"); 
      var row=table.insertRow(-1); 
      var cell1=row.insertCell(0); 
      var cell2=row.insertCell(1); 
      cell1.innerHTML=ctype; 
      cell2.innerHTML=amt; 

     } 

     function saveForm() { 
      if(amtTotal < 100){ 
       alert("Thank you"); 
      } else 
      { 
       alert("Invalid Amount") 
      } 
     } 

     function deletRow() { 
    document.getElementById("results").deleteRow(0); 
} 

</script> 

はありがとうございました。文法には申し訳ありません。この

4のような総量でマイナス現在の行量に必要除去しながら

+0

行0は、それが削除されますので向かっています。あなたはヘッダーの後に単一の行を削除するか、ヘッダーの後にすべての行を削除する必要があります – JYoThI

+0

私は選択された行を削除したいが、私はjavascriptでそれを適用する方法を知らない – pkm

+0

jqueryを使用するのは大丈夫ですか? – JYoThI

答えて

0

1)))削除チェックボックスに基づいて、各行

2)の行

3のチェックボックスを作成します最後に下から上へ行を削除する必要があります。行を上から下に削除すると、行インデックスエラーがスローされます。

var amtTotal = 0; 
 

 
     function updateForm() { 
 
      var ctype = document.getElementById("ctype").value; 
 
      var amt = document.getElementById("amt").value; 
 
      amtTotal = amtTotal + parseInt(amt); 
 
      document.getElementById("amtTotals").innerHTML=amtTotal; 
 

 
      var table=document.getElementById("results"); 
 
      var row=table.insertRow(-1); 
 
      var cell1=row.insertCell(0); 
 
      var cell2=row.insertCell(1); 
 
\t \t \t var cell3=row.insertCell(2); 
 
      cell1.innerHTML=ctype; 
 
      cell2.innerHTML=amt; 
 
\t \t \t cell3.innerHTML='<input type="checkbox" name="deletee" value="1" >'; 
 

 
     } 
 

 
     function saveForm() { 
 
      if(amtTotal < 100){ 
 
       alert("Thank you"); 
 
      } else 
 
      { 
 
       alert("Invalid Amount") 
 
      } 
 
     } 
 

 
     function deletRow() { 
 
    //document.getElementById("results").deleteRow(0); 
 
\t 
 
\t var table = document.getElementById('results'); 
 
     var rowCount = table.rows.length; 
 
\t \t 
 
\t \t //alert(rowCount); 
 
\t \t 
 
      var row_ids =[]; 
 
     // var i=1 to start after header 
 
     for(var i=rowCount-1; i>=rowCount-(rowCount-1); i--) { 
 
      var row = table.rows[i]; 
 
      // index of td contain checkbox is 8 
 
\t \t \t if(row) 
 
\t \t \t { 
 
\t \t \t \t var chkbox = row.cells[2].getElementsByTagName('input')[0]; 
 
\t \t \t \t var current_row_amount = row.cells[1].innerHTML; 
 
\t \t \t \t //alert(chkbox.checked); 
 
\t \t \t \t if('checkbox' == chkbox.type && true == chkbox.checked) { 
 
\t \t \t \t \t 
 
\t \t \t \t \t //row_ids.push(i); 
 
      table.deleteRow(i); 
 
\t \t \t \t \t amtTotal= amtTotal-parseInt(current_row_amount); 
 
\t \t \t \t \t document.getElementById("amtTotals").innerHTML=amtTotal; 
 
\t \t \t \t \t 
 
\t \t \t \t } 
 
\t \t \t } 
 
     } 
 

 
    }
<form> 
 
     <h2>Receipt</h2> 
 
     <table> 
 
      <tr> 
 
       <td> 
 
        <label for="ctype">Charge Type</label> 
 
       </td> 
 
       <td> 
 
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 
        <input id="ctype" name="ctype" placeholder="--" style="border: none;" type="text" /> 
 
       </td> 
 
      </tr> 
 

 
      <tr> 
 
       <td> 
 
        <label for="amt">Amount</label> 
 
       </td> 
 
       <td> 
 
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 
        <input id="amt" name="amt" placeholder="--" style="border: none;" type="text" /> 
 
       </td> 
 
      </tr> 
 

 
      <tr> 
 
       <td> 
 
        <label for="camt">Cash Amount</label> 
 
       </td> 
 
       <td> 
 
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
 
        <label>100</label> 
 
       </td> 
 
      </tr> 
 
     </table> 
 
     <br><input type="reset" name="reset" id="resetbtn" style="border: none; height:30px; width:100px;" class="resetbtn" value="Reset" />&nbsp;&nbsp; 
 
     <button type="button" style="border: none; height:30px; width:100px;" onClick="updateForm();"/>Add To Table</button>&nbsp;&nbsp; 
 
     <button type="button" style="border: none; height:30px; width:100px;" onClick="saveForm()" />Save</button> 
 
     <button type="button" style="border: none; height:30px; width:100px;" onClick="deletRow()" />Remove</button> 
 
    </form> 
 
    <br> 
 

 
    <table id="results" width="360"> 
 
     <thead> 
 
     <tr> 
 
      <th scope="col" width="120">Charge Type</th> 
 
      <th scope="col" width="120">Amount</th> 
 
     </tr> 
 
     </thead> 
 
\t \t <tbody> 
 
\t \t </tbody> 
 
    </table> 
 

 
    <table id="resultTotals" width="360"> 
 
    <tr> 
 
     <td scope="col" width="120">Totals</td> 
 
     <td scope="col" width="120"><div id="amtTotals"></div></td> 
 
    </tr> 
 
    </table>

+0

ありがとうございました。それは完全に動作します。 – pkm

+0

あなたを助けてうれしい@pkm – JYoThI

関連する問題