Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/html/90.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
如何在html和javascript中删除表项_Javascript_Html - Fatal编程技术网

如何在html和javascript中删除表项

如何在html和javascript中删除表项,javascript,html,Javascript,Html,请帮帮我。我是javascript新手。我希望在用户使用javascript和html选择行时删除表单本身的表条目。 我尝试删除函数,但它删除标题太多,我不想。用户应选择行并将其删除 html代码: <body> <form> <h2>Receipt</h2> <table> <tr> <td>

请帮帮我。我是javascript新手。我希望在用户使用javascript和html选择行时删除表单本身的表条目。 我尝试删除函数,但它删除标题太多,我不想。用户应选择行并将其删除

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>

收据
电荷类型
数量
现金数额
100

添加到表中 拯救 去除
电荷类型 数量 总数
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>

var Amttottal=0;
函数updateForm(){
var ctype=document.getElementById(“ctype”).value;
var amt=document.getElementById(“amt”).value;
amttottal=amttottal+parseInt(金额);
document.getElementById(“amtTotals”).innerHTML=amtTotal;
var table=document.getElementById(“结果”);
var行=table.insertRow(-1);
var cell1=行插入单元格(0);
var cell2=行插入单元格(1);
cell1.innerHTML=ctype;
cell2.innerHTML=amt;
}
函数saveForm(){
如果(amtTotal<100){
警惕(“谢谢”);
}否则
{
警报(“无效金额”)
} 
}
函数deletRow(){
document.getElementById(“结果”).deleteRow(0);
}
多谢各位。对不起,语法错误。

1)为每行创建复选框

2) 基于复选框删除该行

3) 删除时,您需要将当前行的金额减去总金额,如下所示

4) 还有一个技巧,你需要从下到上删除最后一行。如果从上到下删除行,将抛出行索引错误

var amttottal=0;
函数updateForm(){
var ctype=document.getElementById(“ctype”).value;
var amt=document.getElementById(“amt”).value;
amttottal=amttottal+parseInt(金额);
document.getElementById(“amtTotals”).innerHTML=amtTotal;
var table=document.getElementById(“结果”);
var行=table.insertRow(-1);
var cell1=行插入单元格(0);
var cell2=行插入单元格(1);
var cell3=行插入单元格(2);
cell1.innerHTML=ctype;
cell2.innerHTML=amt;
cell3.innerHTML='';
}
函数saveForm(){
如果(amtTotal<100){
警惕(“谢谢”);
}否则
{
警报(“无效金额”)
} 
}
函数deletRow(){
//document.getElementById(“结果”).deleteRow(0);
var table=document.getElementById('results');
var rowCount=table.rows.length;
//警报(行计数);
变量行_id=[];
//var i=1在收割台之后开始
对于(变量i=rowCount-1;i>=rowCount-(rowCount-1);i--){
var row=表.行[i];
//td contain复选框的索引为8
国际单项体育联合会(世界其他地区)
{
var chkbox=row.cells[2]。getElementsByTagName('input')[0];
var current\u row\u amount=行。单元格[1]。innerHTML;
//警报(chkbox.checked);
if('checkbox'==chkbox.type&&true==chkbox.checked){
//行标识推送(i);
表1.删除行(i);
amtTotal=amtTotal parseInt(当前行金额);
document.getElementById(“amtTotals”).innerHTML=amtTotal;
}
}
}
}

收据
电荷类型
数量
现金数额
100

添加到表中 拯救 去除
电荷类型 数量 总数
第0行为标题,因此将其删除。您需要删除标题后的单行或标题后的所有行?我想删除所选行,但不知道如何在JavaScription中应用它。使用jquery可以吗?如果可能,那么没有问题。请尝试下面的答案@pkmglad以帮助您@pkm