题目
如图,我们需要在表单中放置一个这样的东西 ,初始状态如合同原件一致,每项都有操作按钮(增加一行、向上替换、向下替换,删除一行),点击所在行还可以选中行,如果用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事件,样式等等,如此新增行功能就实现了,接下来还有选中,删除,替换三个功能,但是小编现在有点困了,打算睡一觉起来再继续写...