你好,我在javascript和jquery新手。 我想使用javascript创建一个动态文本框,可以添加和删除一行。 当我按下添加按钮时,效果很好。 但当我按下删除时,它删除了我的所有表格。
这是我的javascript函数和我的PHP代码:
<script type="text/javascript"> function addProg(){ document.getElementById("add_prog").innerHTML += "<tr><td><input type='date' class='form-control' name='tanggal[]'></td><td><input type='number' class='form-control' name='kuota[]'></td><td><input type='time' class='form-control' name='jam_mulai[]'></td><td><input type='button' class='btn btn-danger' onclick='hapus()' value='Hapus'></tr>"; } function hapus() { var x = document.getElementById("add_prog"); x.remove(x.tr); } </script> <div class="container"> <center><h3>Form Pendaftaran </h3><center><br> <table class="table table-bordered"> <thead><tr> <td> a </td> <td> b </td> <td> c </td> </tr></thead> <tbody id="add_prog"> <tr id="1"> <td><input type="date" class="form-control" name="tanggal[]"></td> <td><input type="number" class="form-control" name="kuota[]"></td> <td><input type="time" class="form-control" name="jam_mulai[]"></td> <td><input type="button" class="btn btn-danger" onclick="hapus()" value="Hapus"></td> </tr> </tbody> </table> <input type="button" class="btn btn-default" onclick="addProg()" value="Tambah">我不知道如何删除我要删除的特定索引并将其写入我的脚本中。 有人可以告诉我该怎么做?
hello im newbie at javascript and jquery. i want to make a dynamical textbox using javascript which can add and remove a row. when i press add button, it works well. but when i pressed delete, it deleted all my table.
here is my javascript function and my php code:
<script type="text/javascript"> function addProg(){ document.getElementById("add_prog").innerHTML += "<tr><td><input type='date' class='form-control' name='tanggal[]'></td><td><input type='number' class='form-control' name='kuota[]'></td><td><input type='time' class='form-control' name='jam_mulai[]'></td><td><input type='button' class='btn btn-danger' onclick='hapus()' value='Hapus'></tr>"; } function hapus() { var x = document.getElementById("add_prog"); x.remove(x.tr); } </script> <div class="container"> <center><h3>Form Pendaftaran </h3><center><br> <table class="table table-bordered"> <thead><tr> <td> a </td> <td> b </td> <td> c </td> </tr></thead> <tbody id="add_prog"> <tr id="1"> <td><input type="date" class="form-control" name="tanggal[]"></td> <td><input type="number" class="form-control" name="kuota[]"></td> <td><input type="time" class="form-control" name="jam_mulai[]"></td> <td><input type="button" class="btn btn-danger" onclick="hapus()" value="Hapus"></td> </tr> </tbody> </table> <input type="button" class="btn btn-default" onclick="addProg()" value="Tambah">i dont know how to delete spesific index that i want to deleted and write it in my script. can someone just please tell me how to do it?
最满意答案
使用element.parentNode.parentNode.remove(); 删除元素,因为你必须找到带有相应点击按钮的tr元素
尝试这个:
function addProg() { document.getElementById("add_prog").innerHTML += "<tr><td><input type='date' class='form-control' name='tanggal[]'></td><td><input type='number' class='form-control' name='kuota[]'></td><td><input type='time' class='form-control' name='jam_mulai[]'></td><td><input type='button' class='btn btn-danger' onclick='hapus(this)' value='Hapus'></tr>"; } function hapus(element) { element.parentNode.parentNode.remove(); //document.getElementById('add_prog').removeChild(element.parentNode.parentNode); }<div class="container"> <center> <h3>Form Pendaftaran </h3> <center> <br> <table class="table table-bordered"> <thead> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> </thead> <tbody id="add_prog"> <tr id="1"> <td> <input type="date" class="form-control" name="tanggal[]"> </td> <td> <input type="number" class="form-control" name="kuota[]"> </td> <td> <input type="time" class="form-control" name="jam_mulai[]"> </td> <td> <input type="button" class="btn btn-danger" onclick="hapus(this)" value="Hapus"> </td> </tr> </tbody> </table> <input type="button" class="btn btn-default" onclick="addProg()" value="Tambah">Use element.parentNode.parentNode.remove(); to remove element as you will have to find the tr element with respective clicked button
Try this:
function addProg() { document.getElementById("add_prog").innerHTML += "<tr><td><input type='date' class='form-control' name='tanggal[]'></td><td><input type='number' class='form-control' name='kuota[]'></td><td><input type='time' class='form-control' name='jam_mulai[]'></td><td><input type='button' class='btn btn-danger' onclick='hapus(this)' value='Hapus'></tr>"; } function hapus(element) { element.parentNode.parentNode.remove(); //document.getElementById('add_prog').removeChild(element.parentNode.parentNode); }<div class="container"> <center> <h3>Form Pendaftaran </h3> <center> <br> <table class="table table-bordered"> <thead> <tr> <td>a</td> <td>b</td> <td>c</td> </tr> </thead> <tbody id="add_prog"> <tr id="1"> <td> <input type="date" class="form-control" name="tanggal[]"> </td> <td> <input type="number" class="form-control" name="kuota[]"> </td> <td> <input type="time" class="form-control" name="jam_mulai[]"> </td> <td> <input type="button" class="btn btn-danger" onclick="hapus(this)" value="Hapus"> </td> </tr> </tbody> </table> <input type="button" class="btn btn-default" onclick="addProg()" value="Tambah">
更多推荐
class,type,javascript,电脑培训,计算机培训,IT培训"/> <meta name="descrip
发布评论