原生JS制作捐款系统

                    #### HTML结构

    <div class="donation-management">
        <h3 class="title">捐赠管理</h3>
        <!-- 受捐单位 -->
        <div class="recipient">
            <div class="content">
                <span>受捐单位：</span>
                <select class="searchOpt">
                    <option>全部</option>
                    <option>壹基金</option>
                    <option>嫣然基金</option>
                    <option>自然之友</option>
                </select>
                <button class="search">查询</button>
            </div>
        </div>

        <!-- 捐赠人金额日期等内容 -->
        <div class="donor">
            <div class="content">
                <!-- 第一部分 捐赠人 -->
                <div class="person">
                    <span>捐赠人：</span>
                    <input type="text" class="getDonor" />
                </div>
                <!-- 第二部分 受捐单位 -->
                <div class="unit">
                    <span>受捐单位：</span>
                    <select class="getUnit">
                        <option>壹基金</option>
                        <option>嫣然基金</option>
                        <option>自然之友</option>
                    </select>
                </div>
                <!-- 第三部分 金额 -->
                <div class="money">
                    <span>金额：</span>
                    <input type="text" class="getMoney" />
                </div>
                <!-- 第四部分 受捐日期 -->
                <div class="date">
                    <span>受捐日期：</span>
                    <input type="datetime-local" class="getDate test1" id="test1" placeholder="请选择日期" />
                </div>
                <!-- 新增按钮 -->
                <button class="add">新增</button>
            </div>
        </div>

        <!-- 表格部分 -->
        <table class="table table-bordered donation-list text-center">
            <!-- 表格头 标题 -->
            <thead>
                <tr class="bg-primary">
                    <th>序号</th>
                    <th>捐赠人</th>
                    <th>受捐单位</th>
                    <th>金额</th>
                    <th>受捐日期</th>
                    <th>操作</th>
                </tr>
            </thead>
            <!-- 表格内容 -->
            <tbody>
                <!-- <tr class="table-content">
                    <td>1</td>
                    <td>这是姓名</td>
                    <td>这是单位</td>
                    <td>这是多少钱</td>
                    <td>这是捐赠日期</td>
                    <td>
                        <a href="#" class="del">删</a>
                        <a href="#" class="update" data-name="这是姓名" data-dep="这是单位">改</a>
                    </td>
                </tr> -->
            </tbody>
        </table>
    </div>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title" id="myModalLabel">编辑</h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">捐赠人</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="person" placeholder="请输入分类名称" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">金额</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="money" placeholder="请输入金额" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="name" class="col-sm-2 control-label">受捐单位</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="unit" placeholder="请输入受捐单位" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="slug" class="col-sm-2 control-label">受捐日期</label>
                            <div class="col-sm-10">
                                <input type="text" class="form-control" id="date" placeholder="请输入受捐日期" />
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">
                        取消
                    </button>
                    <button type="button" class="btn btn-primary btnsave">保存</button>
                </div>
            </div>
        </div>
    </div>

CSS样式

  width: 980px;
  /* height: 370px; */
  /* background-color: #6cf; */
  padding: 0 15px;
  margin: 100px auto;
}
.donation-management .title {
  text-align: center;
}
th {
  text-align: center;
}
span {
  padding-left: 5px;
}
.recipient,
.donor {
  display: flex;
  width: 950px;
  height: 40px;
  border: 1px solid #337ab7;
}
.donor {
  margin-top: 1px;
}
.recipient .content,
.donor .content {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.recipient .content {
  width: 237px;
  /* background-color: #0a0; */
}

JS部分 使用了bootstrap框架和JQuery

//本地存储
let donorlist = JSON.parse(this.localStorage.getItem('donor_1')) ||[]
    //渲染数据
    function init(arr = donorlist){
        let htmlStr = ''
        arr.forEach(function(v,i){
            htmlStr += `<tr class="table-content">
                            <td>${i+1}</td>
                            <td>${v.person}</td>
                            <td>${v.unit}</td>
                            <td>${v.money}</td>
                            <td>${v.date}</td>
                            <td>
                                <a href="#" class="del" data-id = "${v.id}">删</a>
                                <a href="#" class="update" data-id = "${v.id}">改</a>
                            </td>
                        </tr>`
        })
        tbody.innerHTML = htmlStr
        localStorage.setItem('donor_1',JSON.stringify(donorlist))
    } 
    init()

//新增按钮
add.addEventListener('click',function(){
    let donorReg = /^[\u4e00-\u9fa5]|[a-zA-Z]$/
    if(!getDonor.value || !donorReg.test(getDonor.value)){
        alert('请输入正确的捐赠人')
    }else if (!getMoney.value ||isNaN(getMoney.value)){
        alert('请您输入正确的捐款额')
    }



    else{
        let obj = {
            id: donorlist.length > 0?donorlist[donorlist.length-1].id +1:666,
            person: getDonor.value,
            unit: getUnit.value,
            money: getMoney.value,
            date: formatTime(getDate.value)
        }
        donorlist.push(obj)
        init()
    }
})


    //事件委托
tbody.addEventListener('click',function(e){
    //删除按钮
    if(e.target.className == 'del'){
        let id = e.target.dataset.id
        donorlist.forEach(function(v,i){
            if(v.id == id){
                donorlist.splice(i,1)
                init()
            }
        })
    }

    //修改按钮
    if(e.target.className == 'update'){
        let id = e.target.dataset.id
        $('#myModal').modal('show')
        donorlist.forEach(function(value,index){
            if(value.id == id){
                dataId = id
                personEle.value = value.person
                moneyEle.value = value.money
                unitEle.value = value.unit
                dateEle.value = value.date
            }
        })
    }

    
})

   //保存按钮
btnsave.addEventListener('click',function(){
    donorlist.forEach(function(value,index){
        if(value.id == dataId){
            value.person = personEle.value
            value.money = moneyEle.value
            value.unit = unitEle.value
            value.date = dateEle.value

            init()
            $('#myModal').modal('hide')
        }
    })
})

    //查询按钮
search.addEventListener('click',function(){
    let option = searchOpt.value
    if(option =='全部'){
        init()
    }else{
        let temp = donorlist.filter(function(value){
            return value.unit == option
        })
        init(temp)
    }
})

    //格式化时间
function formatTime(){
    let time = new Date()
    let year = time.getFullYear()
    let month = time.getMonth() +1
    let day = time.getDate()
    // let week = time.getDay()
    let hour = time.getHours()
    let minute = time.getMinutes()
    let second = time.getSeconds()

    return `${year}-${month}-${day} ${hour}:${minute}:${second}`
}