Javascript 如何删除HTML表格行

我正在使用Vue.js单击

ADD

，创建一个HTML表格行。对于每一行，我都有一个“删除”按钮，单击“我要删除当前行”

问题是

t车身

在其他部件中定义，而

thead

在其他部件中定义

我知道如何删除

Vue.component（“表单行”{
模板：“#行模板”，
道具：{
itemname:String，
数量：数量，
售价：个，
金额：数字
},
方法：{
删除（）{
警报（“tedt”）
}
},
计算：{
数量同步：{
得到（）{
退回这个数量；
},
集合（v）{
这.$emit（“更新：数量”+v）；
}
},
销售价格同步：{
得到（）{
返回此.sellingprice；
},
集合（v）{
这是.$emit（“更新：sellingprice”，+v）；
}
},
amountSynced（）{
此.$emit（“更新：金额”，parseFloat（this.quantity）*parseFloat（this.sellingprice））；
退还这个金额
}
}
});
新Vue({
el:“应用程序”，
数据（）{
返回{
表数据：[]
};
},
方法：{
btnOnClick（v）{
这个是.tableDatas.push({
项目名称：“项目”，
数量：1，
售价：55，
金额：55
});
}
},
计算：{
计算（）{
返回(
此.tableDatas.reduce（（总计{
数量
})=>总额+金额，0）| | 0
);
}
}
});

添加
项目名称
量
售价
数量
行的总金额
删除
您应该能够简单地
$emit（）
删除项目的意图，并为其附加适当的处理程序

儿童

删除

家长



{
方法：{
btnOnDelete（键）{
本表数据拼接（图例1）；
}
}
}


Vue.component（“表单行”{
模板：“#行模板”，
道具：{
itemname:String，
数量：数量，
售价：个，
金额：数字
},
计算：{
数量同步：{
得到（）{
退回这个数量；
},
集合（v）{
这.$emit（“更新：数量”+v）；
}
},
销售价格同步：{
得到（）{
返回此.sellingprice；
},
集合（v）{
这是.$emit（“更新：sellingprice”，+v）；
}
},
amountSynced（）{
此.$emit（“更新：金额”，parseFloat（this.quantity）*parseFloat（this.sellingprice））；
退还这个金额
}
}
});
新Vue({
el:“应用程序”，
数据（）{
返回{
表数据：[]
};
},
方法：{
btnOnClick（v）{
这个是.tableDatas.push({
项目名称：“项目”，
数量：1，
售价：55，
金额：55
});
},
btnOnDelete（键）{
本表数据拼接（图例1）；
}
},
计算：{
计算（）{
返回(
此.tableDatas.reduce（（总计{
数量
})=>总额+金额，0）| | 0
);
}
}
});
Vue.config.productionTip=false；
Vue.config.devtools=false

添加
项目名称
量
售价
数量
行的总金额
删除
您可以使用
this.$parent
调用parent方法

注意：
delete
是javascript中的一个关键字，因此不能用作函数名


Vue.component（“表单行”{
模板：“#行模板”，
道具：{
索引：编号，
itemname:String，
数量：数量，
售价：个，
金额：数字
},
方法：{
deleteRow（）{
this.$parent.deleteRow（this.index）
}
},
计算：{
数量同步：{
得到（）{
退回这个数量；
},
集合（v）{
这.$emit（“更新：数量”+v）；
}
},
销售价格同步：{
得到（）{
返回此.sellingprice；
},
集合（v）{
这是.$emit（“更新：sellingprice”，+v）；
}
},
amountSynced（）{
此.$emit（“更新：金额”，parseFloat（this.quantity）*parseFloat（this.sellingprice））；
退还这个金额
}
}
});
新Vue({
el:“应用程序”，
数据（）{
返回{
表数据：[]
};
},
方法：{
btnOnClick（v）{
这个是.tableDatas.push({
索引：this.tableDatas.length，
项目名称：“项目”，
数量：1，
售价：55，
金额：55
});
},
删除行（索引）{
日志（“删除”，索引）；
本表数据拼接（索引1）；
}
},
计算：{
计算（）{
返回(
此.tableDatas.reduce（（总计{
数量
})=>总额+金额，0）| | 0
);
}
}
});

添加
项目名称
量
售价
数量
行的总金额
删除
参见代码附件。

$（文档）.ready（函数（）{
$（'input[type=“submit”]”）。单击（函数（）{

$（this.parent（）.parent（）.remove（）；
返回false；
});
});`

参考此链接虽然这可能会起作用，但您正在将其紧密耦合到特定的
$parent
，如果组件在其他地方使用（不存在删除处理程序的不同结构），这可能会很糟糕。此外，我还发现了一个bug，其中最后一项似乎无法删除。