基于javascipt-dom编程 table对象的使用

  排名练习:向表格添加数据,当编号遇到重复给予提示并且无法添加,而且按排名顺序添加数据

  参考代码:

  

复制代码 代码如下:

  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

  <html>

  <head>

  <title>ggggg</title>

  <link rel="stylesheet" type="text/css" href="">

  <meta http-equiv="content-type" content="text/html;charset=utf-8">

  <!--js代码可以放置在任意位置,按照先后顺序依次执行 一般放在head标签之间-->

  <script type="text/javascript">

  function test(){

  //获得表格对象

  var mytable=document.getElementById("table1");

  //判断插入是否重复的排名

  //遍历

  //定义变量要插入的位置

  var insertW=mytable.rows.length;

  for(var i=1;i<mytable.rows.length;i++){

  //取出每一行

  var eRows=mytable.rows[i];

  //判断输入的排名是否重复

  if(eRows.cells[0].innerText==no.value){

  window.alert("与排名 "+eRows.cells[0].innerText+" 重复");

  return ;//阻止代码往下面执行

  }

  //进行排序 查找要插入的位置

  if(parseInt(no.value)>parseInt(eRows.cells[0].innerText)){

  insertW=i;

  //window.alert(insertW);

  }

  //window.alert("ok");

  }

  //排序后的插入

  var eachRow=mytable.insertRow(insertW+1);

  //每行添加数据

  eachRow.insertCell(0).innerText=document.getElementById("no").value;

  eachRow.insertCell(1).innerText=username.value;

  eachRow.insertCell(2).innerText=nickname.value;

  }

  </script>

  </head>

  <body>

  <table id="table1" border="1">

  <tr><td>排名</td><td>姓名</td><td>外号</td></tr>

  <tr><td>1</td><td>宋江</td><td>及时雨</td></tr>

  <tr><td>2</td><td>卢俊义</td><td>玉麒麟</td></tr>

  <tr><td>10</td><td>test</td><td>test</td></tr>

  </table>

  <br/><br/>

  排名:<input id="no" type="text" name="no"><br/>

  姓名:<input id="username" type="text" name="username"><br/>

  外号:<input id="nickname" type="text" name="nickname"><br/>

  <input type="button" value="添加" onclick="test()"><br/>

  </body>

  </html>

基于javascipt-dom编程 table对象的使用