Jquery实战----表单制作

题目

如图，我们需要在表单中放置一个这样的东西 ，初始状态如合同原件一致，每项都有操作按钮（增加一行、向上替换、向下替换，删除一行），点击所在行还可以选中行，如果用UI框架写，我们只需要引入所需的组件，我相信不到1小时就可以实现了，那如果用Jquery怎么写呢？

1.引入Jquery

引入的方法多种多样，可以去Jquery官网下载到本地使用，也可以使用cdn利用script标签引入，我这边选择使用cdn引入

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

这个cdn是官方提供的貌似，大家也可放心拿去使用

2.先写UI

既然我们不使用UI框架，没有封装好的组件可用，且这回是用的Jquery，那我们应该先写出表单初始状态的HTML代码

 这里截取部分代码，其余参照以下代码即可

<table>
    <tr>
        <td colspan="4" style="height:30px;">
            <div class="itemContent">
                <div class="itemTitle">资质证书</div>
                <div class="action">
                    <button id="ziZhiAdd" onclick="AddItem('ZiZhi')">+</button>
				    <button id="ziZhiPre" onclick="PreItem('ZiZhi')">^</button>
				    <button id="ziZhiNext" onclick="NextItem('ZiZhi')">v</button>
				    <button id="ziZhiDel" onclick="delItem('ZiZhi')">-</button>
			    </div>
		    </div>
	    </td>
    </tr>
</table>

<style>
    .itemContent{
        display: flex;
        justify-content: space-around;
        width: 100%;
    }
    .itemTitle{
        font-weight:bold;
        font-size:13px;
        width:35%;
        text-align: center;
        line-height: 30px;
    }
    .action button{
		background-color:#44BBA3;
		border:0px;
		color:white;
		padding-left:20px;
		padding-right:20px;
		padding-top:8px;
		padding-bottom:8px;
		margin:0px;
		cursor:pointer;
		margin-left:-4px;
	}
</style>

3.实现功能

3.1 增加一行

如果我们用vue，仅需要关注数据层即可，MVVM设计模式将视图和业务区分开，以ModelView作为二者的连接，如果我们要增加一行，将v-for的数组的末端新增一个数据即可。

Jquery则需要操作dom，在JS中写HTML和CSS，操作dom时我们还需要选择插入dom的位置，再进行插入，代码如下

function AddItem(type){
	this.event.preventDefault()
			
	const res = arrfilter(type)
	const currentIndex = res.currentIndex
	const currentItemArr = res.currentItemArr
	const arrMaxLength = currentItemArr.length//数组长度，理解为最大值
	let placeholderContent = '资质证书'
	switch(type){
		case 'ZiZhi':
			placeholderContent = '资质证书';
			break;
		case 'JiangXiang':
			placeholderContent = '奖项证书';
			break;
		case 'ZhengJian':
			placeholderContent = '个人证件';
			break;
		case 'HeTong':
			placeholderContent = '合同原件';
			break;
	}
	let newRow = `<tr onclick=\"handleSelect(this)\" id="${type}${arrMaxLength+1}">
					<td class="tdStyle">${arrMaxLength+1}</td><td class="content" colspan="2">
						<input class="inputFullWidth" type="text" placeholder="点选回填${placeholderContent}">
					</td>
					<td class="content" colspan="2"><input class="inputFullWidth" type="text" placeholder="备注"></td>
				  </tr>`;

	$(currentItemArr[arrMaxLength-1]).after(newRow)
}

开头写了个this.event.preventdefault()，是为了阻止button在表单中的默认事件，如果没有这一句代码，表单会被提交，页面会被刷新，即使新增了一行，也会因为刷新了又消失，不信的话可以将此句删除。

此外，我封装了一个arrfilter的函数，这个函数的作用是为了查询当前项（如资质证书）已有行数，根据Jquery的一个不知道叫啥的选择器

function arrfilter(type){
	let currentItemArr = $(`[id^=${type}]`)//模糊查询ZiZhi关键字ID tr

	let currentIndex = currentItemArr.map((index,item)=>{//获取当前被选中的行
		if(item.className == 'ziZhiActive'){
			return index
		}
	})

	let result = {
		currentItemArr,
		currentIndex
	}
	return result
}

$('id^=xxx')：id为什么什么开头的元素

$(xx).after('')：在xx元素后添加一个dom元素，可以写在after里

运用这两个Jquery封装的api，就可以实现定位元素并在末端插入了，定位到对应ID的元素，并利用after插入新的行，新的行我们也给了行ID，click事件，样式等等，如此新增行功能就实现了，接下来还有选中，删除，替换三个功能，但是小编现在有点困了，打算睡一觉起来再继续写...