FORK ME

console 命令行工具 X clear

                    
>
console
//添加事件方法
      function addEvent (e) {
        var _child = e.childNodes,
            len = _child.length;
        e.onmouseover = function () {
                              var len = e.childNodes.length;
                              for (var i = 0; i < len; i++) {
                                e.childNodes[i].style.backgroundColor = '#888'
                              }
                            };
        e.onmouseout = function () {
                              var len = e.childNodes.length;
                              for (var i = 0; i < len; i++) {
                                e.childNodes[i].style.backgroundColor = '#fff'
                              }
                            };
        for (var i = 0; i < len; i++) {
          var tt = _child[i].attributes && _child[i].attributes['name'] && _child[i].attributes['name'].value;
          if (tt == 'forId') {
            _child[i].firstChild.onblur = function () {
              if(/.+/.test(this.value)) {
                if (!/^[1-9]\d{5}$/.test(this.value)) {
                  alert('学号是以不为0的数字开头的六位数字');
                }
              } else {
                alert('学号不能为空!');
              }
            }
          } else if (tt == 'forName') {
            _child[i].firstChild.onblur = function () {
              if(/.+/.test(this.value)) {
                if (/[^\u4E00-\u9FA5]/g.test(this.value)) {
                  alert('姓名必须由纯汉字组成');
                }
              } else {
                alert('姓名不能为空!');
              }
            }
          }
        }
      }
      // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;
      function addTr () {
          var newTr = document.createElement("tr"),
              oldtr = document.getElementsByTagName('tr'),
              count = oldtr.length;
          newTr.innerHTML = "<td style='border:0;'><input type='checkbox' /></td><td name='count'>" + count + "</td><td name='forId'><input class='a b cd d' type='text' /></td><td name='forName'><input type='text' /></td><td onclick='deleteTr(this)'>删除</td>";
          addEvent(newTr);
          oldtr[0].parentNode.appendChild(newTr);
      }       
      // 创建删除函数
      function deleteTr (e) {
        e.parentNode.parentNode.parentNode.removeChild(e.parentNode.parentNode);
        recount();
      }
			//删除选中的行
      function delTr () {
        var inputList = document.getElementsByTagName('input');
        for (var i = inputList.length - 1; i >= 0; i--) {
          if (inputList[i].type == 'checkbox' && inputList[i].checked == true) {
            deleteTr(inputList[i]);
          }
        }
      }
			//添加序号
      function recount () {
        var trList = document.getElementsByName('count'),
            len = trList.length;
        for (var i = 0; i < len; i++) {
          trList[i].innerHTML = i + 1;
        }
      }
<input type="button" value="添加一行"  onclick="addTr()"/>
<input type="button" value="删除已选"  onclick="delTr()"/>
<table id="table">
    <tr>
        <th style="width:22px;border:0;"></th>
        <th style="width:44px;">序号</th>
        <th>学号</th>
        <th>姓名</th>
        <th style="width:90px;">操作</th>
    </tr>
</table>
html,body {margin: 0; padding: 0; }
* {background-color: #fff}
body>input {margin-left: 20px; }
table {margin-left: 20px; }
table, th, tr, td {border: 1px solid #000; }
table {width: 400px; }
td, th {padding: 0; height: 23px; }
td[onclick] {cursor: pointer; text-align: center; }
th:first-child, td:first-child {width:25px; }
table input {height: 20px; width: 107px; border: 0; margin: 0; margin-left: 1px; text-align: center;}
input[type='checkbox'] {width:20px; margin: 3px 0 0 3px;}