在div中各行数据后自动加上"X"(X为小图标)表示删除本行，求这种效果

downdown518 2011-09-16 11:50:52
在div中各行数据后自动加上"X"(X为小图标)表示删除本行，求这种效果。谢谢
...全文
1035 18 打赏 收藏 转发到动态 举报
写回复
用AI写文章
18 条回复
切换为时间正序
请发表友善的回复…
发表回复
downdown518 2011-09-16
  • 打赏
  • 举报
 回复
能否给我弄成不是jquery版本的呢？

[Quote=引用 5 楼 qianzai5765638 的回复:]
上午刚给解决了一个 看哈

http://topic.csdn.net/u/20110916/09/c83f9804-8515-4cae-99d4-2071cf475c6c.html
[/Quote]
downdown518 2011-09-16
  • 打赏
  • 举报
 回复
我会优先考虑用DIV，实在不行我再考虑用TABLE（主要是用TABLE取数据不方便）
[Quote=引用 4 楼 fanchuanzhidu 的回复:]
<table>
<!--第一行->
<tr>
<td>
内容
</td>
<td>
你的"删除"图片
</td>
</tr>
<!--后边按照第一行的来写就可以了>
</table>

用js动态创建table就可以了
[/Quote]
abcd_ufo 2011-09-16
  • 打赏
  • 举报
 回复
上午刚给解决了一个 看哈

http://topic.csdn.net/u/20110916/09/c83f9804-8515-4cae-99d4-2071cf475c6c.html
豆虫 2011-09-16
  • 打赏
  • 举报
 回复
<table>
<!--第一行->
<tr>
<td>
内容
</td>
<td>
你的"删除"图片
</td>
</tr>
<!--后边按照第一行的来写就可以了>
</table>

用js动态创建table就可以了
downdown518 2011-09-16
  • 打赏
  • 举报
 回复
看了，但与我要求的不同。

我的要求为：

1111111111 X
22222222222 X
33333333333 X

X为小图标，表示删除。

[Quote=引用 1 楼 tantaiyizu 的回复:]
http://www.scriptlover.com/wish/
里面有这种效果。
[/Quote]
downdown518 2011-09-16
  • 打赏
  • 举报
 回复
好，我先看看去。

[Quote=引用 1 楼 tantaiyizu 的回复:]
http://www.scriptlover.com/wish/
里面有这种效果。
[/Quote]
tantaiyizu 2011-09-16
  • 打赏
  • 举报
 回复
http://www.scriptlover.com/wish/
里面有这种效果。
personball 2011-09-16
  • 打赏
  • 举报
 回复
- -这种布局，还死命强调自己的需求。。。
你数据布局改改，列表就td或者li
然后其他就是js的问题了
单纯提出自己的问题，不去学习，求个人给你代码，你也不会用。。
downdown518 2011-09-16
  • 打赏
  • 举报
 回复
我向DIV中插入数据时会先获取DIV中原有的数据，并加上<br>

[Quote=引用 16 楼 qianzai5765638 的回复:]
那你那个br 什么时候 给她添加进去的呢
[/Quote]
abcd_ufo 2011-09-16
  • 打赏
  • 举报
 回复

那你那个br 什么时候 给她添加进去的呢
downdown518 2011-09-16
  • 打赏
  • 举报
 回复
但我不希望这么做。因为我动态向DIV中赋数据和获取DIV中的数据时，会比较麻烦。

希望能达到的效果如上一次的回复所说。
[Quote=引用 14 楼 qianzai5765638 的回复:]
你给 1111<br>
2222<br>
3333<br>

分别放到 三个div里面 或着是 span里面
[/Quote]
abcd_ufo 2011-09-16
  • 打赏
  • 举报
 回复

你给 1111<br>
2222<br>
3333<br>

分别放到 三个div里面 或着是 span里面
downdown518 2011-09-16
  • 打赏
  • 举报
 回复
但你这种还是不能满足！

我的div中的数据格式为：
<div id="disAjax-1_1" class="journey_youhui">
1111<br>
2222<br>
3333<br>
....
</div>

这样一来，onmouseover="change(this,1)" onmouseout="change(this,2)" 就没地方写了。



[Quote=引用 12 楼 qianzai5765638 的回复:]
HTML code


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta htt……
[/Quote]
abcd_ufo 2011-09-16
  • 打赏
  • 举报
 回复 




<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>无标题文档</title>

<style>

.blue

{

	display:none;

}

</style>

<script type="text/javascript">

        function removeHtml(obj,value) {

            alert(value);

            obj.parentNode.parentNode.removeChild(obj.parentNode);

        }

        function add()

        {

            document.getElementById("disDdAjax-1_1").innerHTML+="<dd class='blue'><a href='#'>优惠的名称</a> <span class='undis'>+ _shopid + | + chk.id +</span> <a href=javascript:void(0); onclick=removeHtml(this)><b class=blue>X</b></a></dd>"

        }

		function change(obj,type)

		{

				var object1=obj.getElementsByTagName("span")[1];

				if(type==1)

				{

					object1.style.display="block";

				}else

				{

					object1.style.display="none";

				}

		}

</script>

</head>



<body>

<div id="disAjax-1_1" class="journey_youhui">

  <dl id="disDdAjax-1_1">

    <dt>目的地优惠</dt>

    <dd class=\"blue\" onmouseover="change(this,1)"  onmouseout="change(this,2)"  ><a href="#">优惠的名称</a> <span class="undis">" + _shopid + "|" + chk.id + "</span> <a href="javascript:void(0);" onclick="removeHtml(this,'第一个数据')"><span class="blue">X</span></a></dd>

     <dd class=\"blue\"  onmouseover="change(this,1)"  onmouseout="change(this,2)"   ><a href="#">优惠的名称</a> <span class="undis">" + _shopid + "|" + chk.id + "</span> <a href="javascript:void(0);" onclick="removeHtml(this,'第二个数据')"><span class="blue">X</span></a></dd>

      <dd class=\"blue\"  onmouseover="change(this,1)"  onmouseout="change(this,2)"   ><a href="#">优惠的名称</a> <span class="undis">" + _shopid + "|" + chk.id + "</span> <a href="javascript:void(0);" onclick="removeHtml(this,'第三个数据')"><span class="blue">X</span></a></dd>

  </dl>

  <input type="button" onclick="add()" value="添加" >

</div> 

</body>

</html>
downdown518 2011-09-16
  • 打赏
  • 举报
 回复
实际上我的要求还是有差别。

请认真看要求：

1、在DIV中有多行数据，要求鼠标指向某一行时，会在该行的后面自动加上一个“X”的小图标(用于删除本行数据）；当鼠标指向另一行时，上一次的“X”不能显示。

2、点击页面提交按钮获取DIV中的数据，不能获取有关"X"的数据；


例：
DIV中的数据：

第一行数据 X(当鼠标指点本行时，多了一个X的小图标）
第二行数据 X(当鼠标指点本行时，多了一个X的小图标，但第一行的X不能显示）


提交数据时，获取DIV中的数据为：
第一行数据
第二行数据
[Quote=引用 10 楼 qianzai5765638 的回复:]
HTML code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-……
[/Quote]
abcd_ufo 2011-09-16
  • 打赏
  • 举报
 回复 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>无标题文档</title>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

        function removeHtml(obj) {

            

            obj.parentNode.parentNode.removeChild(obj.parentNode);

        }

		function add()

		{

			document.getElementById("disDdAjax-1_1").innerHTML+="<dd class='blue'><a href='#'>优惠的名称</a> <span class='undis'>+ _shopid + | + chk.id +</span> <a href=javascript:void(0); onclick=removeHtml(this)><b class=blue>X</b></a></dd>"

		}

</script>

</head>



<body>

<div id="disAjax-1_1" class="journey_youhui">

  <dl id="disDdAjax-1_1">

    <dt>目的地优惠</dt>

    <dd class=\"blue\"><a href="#">优惠的名称</a> <span class="undis">" + _shopid + "|" + chk.id + "</span> <a href="javascript:void(0);" onclick="removeHtml(this)"><b class="blue">X</b></a></dd>

     <dd class=\"blue\"><a href="#">优惠的名称</a> <span class="undis">" + _shopid + "|" + chk.id + "</span> <a href="javascript:void(0);" onclick="removeHtml(this)"><b class="blue">X</b></a></dd>

      <dd class=\"blue\"><a href="#">优惠的名称</a> <span class="undis">" + _shopid + "|" + chk.id + "</span> <a href="javascript:void(0);" onclick="removeHtml(this)"><b class="blue">X</b></a></dd>

  </dl>

  <input type="button" onclick="add()" value="添加" >

</div> 

</body>

</html>
abcd_ufo 2011-09-16
  • 打赏
  • 举报
 回复 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

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

<title>无标题文档</title>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

        function removeHtml(obj) {

            

            obj.parentNode.parentNode.removeChild(obj.parentNode);

        }

</script>

</head>



<body>

<div id="disAjax-1_1" class="journey_youhui">

  <dl id="disDdAjax-1_1">

    <dt>目的地优惠</dt>

    <dd class=\"blue\"><a href="#">优惠的名称</a> <span class="undis">" + _shopid + "|" + chk.id + "</span> <a href="javascript:void(0);" onclick="removeHtml(this)"><b class="blue">X</b></a></dd>

     <dd class=\"blue\"><a href="#">优惠的名称</a> <span class="undis">" + _shopid + "|" + chk.id + "</span> <a href="javascript:void(0);" onclick="removeHtml(this)"><b class="blue">X</b></a></dd>

      <dd class=\"blue\"><a href="#">优惠的名称</a> <span class="undis">" + _shopid + "|" + chk.id + "</span> <a href="javascript:void(0);" onclick="removeHtml(this)"><b class="blue">X</b></a></dd>

  </dl>

</div>

</body>

</html>
downdown518 2011-09-16
  • 打赏
  • 举报
 回复
另外，还有一个要求：

向DIV中添加一行数据时，会自动加上“X”的小图标。（注意：是自动）

[Quote=引用 5 楼 qianzai5765638 的回复:]
上午刚给解决了一个 看哈

http://topic.csdn.net/u/20110916/09/c83f9804-8515-4cae-99d4-2071cf475c6c.html
[/Quote]
黑马程序员-美多商城完整项目代码.zip
黑马程序员 大事件Springboot3+vue3项目
M800VM80V系列 编程说明书(L系) ib1501636-1501637chng.pdf
M800VM80V系列 编程说明书(L系) ib1501636-1501637chng
新年烟花代码HTML5-下载即用.zip
源码下载地址： https://pan.quark.cn/s/a9b188c0f76b FireWorks 基于Html+Canvas写的一个2023年3D跨年烟花代码、可以自己修改字以及音乐 image image image
基于 Streamlit + LangChain + DeepSeek 构建的智能知识库问答应用，支持文档上传、向量库构建和智能问答
网上关于LLM大模型构建知识库的理论知识挺多的，但能跑通的代码比较少。此资源对LLM大模型的学习有很大的帮忙。
黑马程序员的Linux网络编程学习记录.zip
黑马程序员 大事件Springboot3+vue3项目
JavaScript

87,990

社区成员

224,684

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章