Js(Jquery) 动态添加删除 table 中的一行元素

最近在做一个小项目,有一个需求是需要动态添加或删除表格中的一行,分享代码如下:

添加元素步骤:

1.先创建一行,即创建 tr

2.将需要显示的内容利用.innerHTML赋值

3.将创建的tr .appendChild追加到表单末尾即可

删除元素步骤:

1.点击td单元格后删除对应的父元素tr即可

<table class="layui-table" id="question_option">
     <tbody>
         <tr>
             <td>
                 <input type="input" name="question_type" class="layui-input">
             </td>
             <td>
                 <input type="input" name="question_type" class="layui-input">
             </td>
             <td onclick="delete_option(this)">
                 删除
             </td>
          </tr>
                                   
    </tbody>
</table>

function add_option(){
 //先创建一个tr元素
let new_tr =document.createElement('tr')
//向创建的tr元素赋值
new_tr.innerHTML=`<td>
                                            <input type="input" name="question_type" class="layui-input">
                                        </td>
                                        <td>
                                            <input type="input" name="question_type" class="layui-input">
                                        </td>
                                        <td onclick="delete_option(this)">
                                            删除
                                        </td>`
                
//将tr元素追加到表格后
document.querySelector("#question_option tbody").appendChild(new_tr)
 }
function delete_option(obj){
    //点击单元格后,删除父元素即可
  $(obj).parents("tr").remove();
}

欢迎关注博客,一起学习!想学习更多js知识,可浏览菜鸟教程