2 dyxm21 dyxm21 于 2016.05.11 18:32 提问

一个JavaScript的作业,求所有源码

求源码⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯⋯图片说明图片说明

5个回答

caozhy
caozhy   Ds   Rxr 2016.05.11 21:38
 <!DOCTYPE html>
<html>
 <head>
  <title> new document </title>  
  <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>   
  <script type="text/javascript">  
     window.onload = function(){
        Highlight();
     }  
     function addOne(obj){ 
        var tbody = document.getElementById(‘table‘).lastChild;  
        var tr = document.createElement(‘tr‘);  

         var td = document.createElement("td");
         td.innerHTML = "<input type=‘text‘/>";
         tr.appendChild(td);

         td = document.createElement("td");     
         td.innerHTML = "<input type=‘text‘/>";
         tr.appendChild(td);

         td = document.createElement("td");    
         td.innerHTML = "<a href=‘javascript:;‘ onclick=‘deleteRow(this)‘>删除</a>";
         tr.appendChild(td);   

         tbody.appendChild(tr);   
        Highlight();
        }

     function deleteRow(obj){
        var tbody = document.getElementById(‘table‘).lastChild;  
        var tr = obj.parentNode.parentNode;
         tbody.removeChild(tr);
     }
     function Highlight(){
        var tbody = document.getElementById(‘table‘).lastChild;    
        trs = tbody.getElementsByTagName(‘tr‘);   
        for(var i =1;i<trs.length;i++){
            trs[i].onmouseover = function(){
                this.style.backgroundColor ="#f2f2f2";
            } 
            trs[i].onmouseout = function(){
                this.style.backgroundColor ="#fff";
            } 
        }  
     }

  </script> 
 </head> 
 <body> 
       <table border="1" width="50%" id="table">
       <tr>
        <th>学号</th>
        <th>姓名</th>
        <th>操作</th>
       </tr>  

       <tr>
        <td>xh001</td>
        <td>王小明</td>
        <td><a href="javascript:;" onclick="deleteRow(this)">删除</a></td>
       </tr>

       <tr>
        <td>xh002</td>
        <td>刘小芳</td>
        <td><a href="javascript:;" onclick="deleteRow(this)">删除</a></td>
       </tr>  

       </table>
       <input type="button" value="添加一行" onclick="addOne()" />
 </body>
</html>

http://www.bubuko.com/infodetail-932251.html

perhapschen
perhapschen   2016.05.12 00:12

操作表格比较麻烦,不用表格的尽量不用,

 <!--支持IE9+、FF、Chrome、opera-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>表格的DOM操作</title>
<script>
onload = function() {

  var table = document.getElementById('table'),
      tbody = table.tBodies[0],
      num   = tbody.rows.length,
      add   = document.getElementById('add'),
      name  = document.getElementById('name'),
      age   = document.getElementById('age');

  add.onclick = function() {
    var th = document.createElement('th'),
        tr = document.createElement('tr');
    th.innerHTML = num++;
    tr.appendChild(th);

    var td = document.createElement('td');
    td.innerHTML = name.value;
    tr.appendChild(td);

    td = document.createElement('td');
    td.innerHTML = age.value;
    tr.appendChild(td);

    name.value = '';
    age.value = '';

    td = document.createElement('td');
    td.innerHTML = "<a href='javascript:;'>DEL</a>";
    tr.appendChild(td);

    tbody.appendChild(tr);
  }

  tbody.addEventListener('click', function(e) { //事件委托
    e = e || event;
    if (e.target && e.target.nodeName == 'A') {
      tbody.removeChild(e.target.parentNode.parentNode);
    }
  }, false)

  tbody.addEventListener('mouseover', function(e) { //事件委托
    e = e || event;
    if (e.target.nodeName == 'A')
      e.target.parentNode.parentNode.style.background = '#f2f2f2';
    else
      e.target.parentNode.style.background = '#f2f2f2';

  }, false)

  tbody.addEventListener('mouseout', function(e) { //事件委托
    e = e || event;
    if (e.target.nodeName == 'A')
      e.target.parentNode.parentNode.style.background = '#fff';
    else
      e.target.parentNode.style.background = '#fff';

  }, false)

};
</script>
</head>
<body>
name: <input type='text' id='name' />
age: <input type='text' id='age' />
<input type='button' id='add' value='ADD' />
<table border='1' width='500' id='table' style='border-collapse:collapse; border-spacing:0; text-align:center;'>
  <thead>
    <tr>
      <th>序号</th>
      <td>姓名</td>
      <td>年龄</td>
      <td>操作</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>22</td>
      <td>张三</td>
      <td><a href="javascript:;">DEL</a></td>
    </tr>
    <tr>
      <th>2</th>
      <td>23</td>
      <td>李四</td>
      <td><a href="javascript:;">DEL</a></td>
    </tr>
    <tr>
      <th>3</th>
      <td>22</td>
      <td>王五</td>
      <td><a href="javascript:;">DEL</a></td>
    </tr>
  </tbody>
</table>
</body>
</html>
vx_list
vx_list   2016.05.15 12:42
学习前段是个苦逼的差事,少年一定要勤快,加油啊!
havedream_one
havedream_one   2016.05.11 20:31

这么详细了,还是自己动手谢谢吧

Royal_lr
Royal_lr   Ds   Rxr 2016.05.11 18:50

这个思路都写出来,,还不会写,,只能说伸手党

dyxm21
dyxm21 回复Royal_lr: 能给源码吗
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!