Javascript动态添加表格行

1.Javascript如何动态添加表格行

图一

图二

1.首先要找到添加按钮代码，设置id选择器

<button type="button" id="insertRow"  class="btn btn-danger" style="background-color: #ca6307;border: none">新增一项</button>

2.写js代码，添加静态代码块

$("#insertRow").click(function (){
    let tr=''
    tr+='<tr id="row'+index+'">'
    tr+='  <td>'+index+'</td>'
    tr+='  <td>'
    tr+='    <div class="row">'
    tr+='      <select class="form-control col-md-8" name="extypeids">'
    tr+='             <option value="-1">==报销类别==</option>'
    tr+=$("#op").html()
    tr+='      </select>'
    tr+='    </div>'
    tr+='  </td>'
    tr+='  <td>'
    tr+='    <div class="row">'
    tr+='      <input type="text" name="moneys" οnkeyup="getTotal()" class="form-control col-md-6" placeholder="请输入总金额...">'
    tr+='    </div>'
    tr+='  </td>'
    tr+='  <td>'
    tr+='    <div class="row">'
    tr+='      <input type="text" name="costdescs" class="form-control col-md-6" placeholder="请输入费用说明...">'
    tr+='    </div>'
    tr+='  </td>'
    tr+='  <td>'
    tr+='    <div class="row">'
    tr+='      <button type="button" class="btn btn-danger" οnclick="deleteRow('+index+')">删除</button>'
    tr+='    </div>'
    tr+=' </td>'
    tr+='</tr>'
    // console.log(tr)
    // 把tr添加到id=detail下tbody中
    $("#detail tbody").append(tr)
    index++
})

2.如何实现表格新添行的序号递增

1.设置一个初始变量索引
2.在方法内部添加++运算，每调用一次方法执行一次

//报销添加开始
let index=1

 index++

3.如何执行删除一行

1.设置一个删除提醒弹窗
2.使用jQuery的删除方法remove

//删除一行
function  deleteRow(index)
{
    if(confirm("真的删除?"))
    {
        $("#row"+index).remove()
    }
}

4.如何计算图一的总金额

1.首先要知道图一的总金额是图二的金额增加之和
2.其次要知道当改动图二的某一行金额时，图一的金额必须实时的改动
3.所以要在图二的金额input标签设置一个onkeyup触发事件,当修改完后会实时计算

<input type="text" name="moneys" onkeyup="getTotal()" class="form-control col-md-6" placeholder="请输入总金额...">'

//得到总金额
function  getTotal()
{
    //正则表达式:验证正数和0
    let reg_int=/^\d+$/
    let total=0
    $("input[name=moneys]").each(function (index,obj){
        if(!$(this).val().match(reg_int))
        {
            total+=0;
            $(this).val(0)
        }
        else
        {
            total+=parseInt($(this).val())
        }

    })
    $("#total").val(total)
}

<input name="total" id="total" type="text" readonly="readonly" style="border: none" value="110">