特效描述:会议室座位 排座交互。原生js默认自定义设置座位行数和列数,进行座位填充、桌子,过道,主席台排列位置,可拖拽、拉伸、删除,桌子可方桌圆桌切换。
代码结构
1. 引入CSS
<link href="images/basic.css" rel="stylesheet"/>
2. 引入JS
<script type="text/javascript" src="images/jquery-1.11.0.min.js"></script> <script type="text/javascript" src="images/basic.js"></script>
3. HTML代码
<div class="content" id="content"> <form> <input type="text" name="hang" placeholder="请输入行数" id="row" class="inp_txt"/> <input type="text" name="lie" placeholder="请输入列数" id="col" class="inp_txt"/> <input type="button" name="button" value="确定" class="inp_btn" onClick="createTable()"/> <input type="button" name="button" value="撤销" class="inp_btn" onClick="breakTable()"/> </form> <div class="table_div fl" id="table_div"> </div> <div class="xz_btn fr"> <span title="选择桌子" id="zhuozi" onClick="addZZ()"><img src="images/zhuozi.png"/></span> <span title="选择过道" id="guodao" onClick="addGD()"><img src="images/guodao.png"/></span> <span title="选择主席台" id="zhuxitai" onClick="addZXT()"><img src="images/zhuxitai.png"/></span></div> <div class="clear"></div> </div>