为了账号安全，请及时绑定邮箱和手机立即绑定

课程

/前端开发

/JavaScript

/JavaScript进阶篇

新问题,求指导

<!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(){

                  

     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。

         

     

 

}

     

      // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；

     function adda(obj){

         var tbody = document.getElementById("table");

         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:;' onlick='dele(this)'>删除</a>"

         tr.appendChild(td);

         

         tbody.appendChild(tr);

         Highlight();

     }

     

     // 创建删除函数

     function dele(obj){

         var tbody = document.getElementById("table").lastChild;

         var tr = obj.parentNode.parentNode;

         tbody.removeChild(tr);

     }



  </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="dele(this)" >删除</a></td>   <!--在删除按钮上添加点击事件  -->

  </tr>


  <tr>

<td>xh002</td>

<td>刘小芳</td>

<td><a href="javascript:;" onclick="dele(this)" >删除</a></td>   <!--在删除按钮上添加点击事件  -->

  </tr>  


  </table>

  <input type="button" value="添加一行"  onclick="adda()" />   <!--在添加按钮上添加点击事件  -->

 </body>

</html>




怎么把新增的<input>标签的边框隐藏掉？      要看起来和上面两行一样，求指导。

qq_轮滑到老_04284587

2017-06-13

源自：JavaScript进阶篇  9-22

关注问题 我要回答
1432
操作
收起

正在回答

5 回答

6比哄哄 回答被采纳 +3 积分
2017-06-15

<!DOCTYPE html>

<html>

 <head>

  <title> new document </title>  

  <meta http-equiv="Content-Type" content="text/html; charset=gbk"/> 

<style>

         #p{

             border: none;

    outline: none;

}

</style>

  <script type="text/javascript"> 


  

      window.onload = function(){

                  

     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。

         



 

}

     

      // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；

    function add(){

         var tbody = document.getElementById("table");

         var tr = document.createElement("tr");

         var td1 = document.createElement("td");

         td1.innerHTML = "<input type='text' id='p'   />"

         tr.appendChild(td1);

         td2 = document.createElement("td");

         td2.innerHTML = "<input type='text'  id='p'  />";

         tr.appendChild(td2);

         

         td3 = document.createElement("td");

         td3.innerHTML ="<a href='javascript:;' onclick='del(this)'>删除</a>"

         tr.appendChild(td3);

         tbody.appendChild(tr);

         Highlight();

     }

     

     // 创建删除函数

     function del(r){

          var i=r.parentNode.parentNode;

       i.parentNode.removeChild(i);

      }



  </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="del(this)" >删除</a></td>   <!--在删除按钮上添加点击事件  -->

  </tr>


  <tr>

<td>xh002</td>

<td>刘小芳</td>

<td><a href="javascript:;" onclick="del(this)" >删除</a></td>   <!--在删除按钮上添加点击事件  -->

  </tr>  


  </table>

  <input type="button" value="添加一行" onclick="add()" />   <!--在添加按钮上添加点击事件  -->

 </body>

</html>

  这是我改正的  ，你的所有要求 都实现了 ！！！  大概吧

0 回复 有任何疑惑可以回复我~
收起回答
#1

qq_轮滑到老_04284587 提问者

为什么不是 var tbody = document.getElementById("table").lastChild; var tr = obj.parentNode.parentNode; tbody.removeChild(tr); 这样呢？ 而是 var tr = obj.parentNode.parentNode; tr.parentNode.removeChild(tr); 这样呢？ 这两种的表达不是同一个意思吗？求解惑
2017-06-15 回复 有任何疑惑可以回复我~
#2

6比哄哄 回复 qq_轮滑到老_04284587 提问者

是同一个意思，尤其是 var tbody = document.getElementById("table"); var tr = obj.parentNode.parentNode; tbody.removeChild(tr); 你不加.lastChild的时候也是可以的。 问你下 为什么要获取最后一个子节点，然后删除另一个节点？
2017-06-15 回复 有任何疑惑可以回复我~
#3

qq_轮滑到老_04284587 提问者

回复 6比哄哄:lastChild 是我看到慕课网给的参考代码是这样写的，其实我也不太明白它为什么要加这个，但是我看到你写的代码不加这个也是可以运行的，所以我有点疑惑
2017-06-15 回复 有任何疑惑可以回复我~
#4

6比哄哄 回复 qq_轮滑到老_04284587 提问者

一个是通过节点删除，一个是通过值删除。 值删除达不到你的要求。
2017-06-15 回复 有任何疑惑可以回复我~
#5

6比哄哄 回复 qq_轮滑到老_04284587 提问者

他写.lastChild是把值转换成节点。
2017-06-15 回复 有任何疑惑可以回复我~
#6

qq_轮滑到老_04284587 提问者 回复 6比哄哄

明白了，谢谢您！
2017-06-15 回复 有任何疑惑可以回复我~
查看3条回复
6比哄哄
2017-06-15

你自己的  源代码也不行吧，因为你新增 是文本框  他不输入 确认  他的值就不固定 当然  系统就不知道  你文本框到底输入完了没有

0 回复 有任何疑惑可以回复我~
收起回答
#1

qq_轮滑到老_04284587 提问者

那要怎么解决这个问题呢？ 可以发解决后的代码给我看吗？ 谢谢
2017-06-15 回复 有任何疑惑可以回复我~
botao555
2017-06-14

设置input的border为0就行了。

1 回复 有任何疑惑可以回复我~
收起回答
6比哄哄
2017-06-13

http://img1.sycdn.imooc.com//593fa5f100018d1606400199.jpg


这样符不符合  这是代码：

<!DOCTYPE html>

<html>

 <head>

  <title> new document </title>  

  <meta http-equiv="Content-Type" content="text/html; charset=gbk"/> 

<style>

         #p{

             border: none;

    outline: none;

}

</style>

  <script type="text/javascript"> 


  

      window.onload = function(){

                  

     // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。

         



 

}

     

      // 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；

     function adda(obj){

         var tbody = document.getElementById("table");

         var tr = document.createElement("tr");

         var td1 = document.createElement("td");

         td1.innerHTML = "<input type='text' id='p'   />"

         tr.appendChild(td1);

         td2 = document.createElement("td");

         td2.innerHTML = "<input type='text'  id='p'  />";

         tr.appendChild(td2);

         

         td3 = document.createElement("td");

         td3.innerHTML ="<a href='javascript:;' onlick='dele(this)'>删除</a>"

         tr.appendChild(td3);

         tbody.appendChild(tr);

        // Highlight();

     }

     

     // 创建删除函数

     function dele(obj){

         var tbody = document.getElementById("table").lastChild;

         var tr = obj.parentNode.parentNode;

         tbody.removeChild(tr);

     }



  </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="dele(this)" >删除</a></td>   <!--在删除按钮上添加点击事件  -->

  </tr>


  <tr>

<td>xh002</td>

<td>刘小芳</td>

<td><a href="javascript:;" onclick="dele(this)" >删除</a></td>   <!--在删除按钮上添加点击事件  -->

  </tr>  


  </table>

  <input type="button" value="添加一行"  onclick="adda()" />   <!--在添加按钮上添加点击事件  -->

 </body>

</html>




0 回复 有任何疑惑可以回复我~
收起回答
#1

qq_轮滑到老_04284587 提问者

边框问题是解决了，但是为什么现在增加新一行之后，删除功能用不了呢？ 没增加新一行之前，删除功能可以用 增加新一行之后，删除功能没作用了
2017-06-15 回复 有任何疑惑可以回复我~
#2

qq_轮滑到老_04284587 提问者

边框问题是解决了，但是为什么现在增加新一行之后，删除功能用不了呢？ 没增加新一行之前，删除功能可以用 增加新一行之后，删除功能没作用了
2017-06-15 回复 有任何疑惑可以回复我~
#3

qq_轮滑到老_04284587 提问者

里面写错的 onclick 我已经改正确了，但是还是不行
2017-06-15 回复 有任何疑惑可以回复我~
6比哄哄
2017-06-13

// 编写一个函数，供添加按钮调用，动态在表格的最后一行添加子节点；

     function adda(){

         var tr = document.createElement("tr");

         var td1 = document.createElement("td");

         td1.innerHTML = "xh003"

         tr.appendChild(td1);

         

         var td2 = document.createElement("td");

         td2.innerHTML = "王戈比";

         tr.appendChild(td2);

         

         var td3 = document.createElement("td");

         td3.innerHTML ="<a href='javascript:;' onlick='dele(this)'>删除</a>"

         tr.appendChild(td3);

          var tab=document.getElementById("table");

         tab.appendChild(tr);

         Highlight();

     }


根据你的代码修改的，你可以打个样。



0 回复 有任何疑惑可以回复我~
收起回答

举报

0/150
提交
取消
JavaScript进阶篇
  • 参与学习       468061    人
  • 解答问题       21891    个

本课程从如何插入JS代码开始，带您进入网页动态交互世界

进入课程

本课相似问答

3 回答求指导求指导

1 回答求大神指导

2 回答求大神指导

4 回答软件求指导

4 回答置顶回答的一些问题..求指导
搜索更多本课相关问答

新问题,求指导

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信