前端开发具有增加删除功能的表单

前端开发具有增加删除功能的表单

一、具备功能

1）新增功能，通过增加按钮增加表单
2）删除功能，通过删除按钮删除表单
3）将阿拉伯数字转换成星期
初始状态图如下：

增加后效果图：

二、实现过程及思路

1）html搭建基本骨架
2）css添加样式
3）js添加功能
参考代码下载地址.

 //增加功能
function addtr() {
  var weeknum = toWeekend(num);
  var html ="";
  html += "  <tr class='title' id='title"+idnum+"'>\n" +
      "                <td><label>"+weeknum+"</label></td>\n" +
      "            </tr>\n" +
      "            <tr id='tr"+idnum+"'>\n" +
      "                <td>上午内容安排</td>\n" +
      "                <td><input type=\"text\" class=\"contentinput\"/></td>\n" +
      "            </tr>\n" +
      "            <tr  id='tr"+(idnum+1)+"'>\n" +
      "                <td>下午内容安排</td>\n" +
      "                <td><input type=\"text\" class=\"contentinput\"/></td>\n" +
      "            </tr>";
  $('#button').before(html);
  idnum++;
  num++;
  if(num>7){
      num =1;
  }
}
//删除功能
function deletetr() {
  idnum--;
  num--;
  if(idnum<3){
      idnum =3;
  }
  if (num<2) {
      num =2;
  }
  $('#title'+idnum).remove();
  $('#tr'+idnum).remove();
  $('#tr'+(idnum+1)).remove();
}
//阿拉伯数字转换成星期
function toWeekend(num) {
  num = Number(num);
  var week = ['','星期一','星期二','星期三','星期四','星期五','星期六','星期日'];
  if(num <= 7){
      return week[num];
  }
}