[急]js实现点击td里的按钮,这个td里增加一个小图片,点击另外一个按钮减少一个图片

cup_student 2012-03-16 11:18:05

js如何实现点击表格td里的增加按钮,在按钮后边增加一个小图片,点击另外一个减少按钮，在减少按钮前边减少一个图片。并且有个隐藏控件来记录图片的个数。
必须在一个td里完成，求大侠帮助！！
基本的样子是：

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

<body>
<table>
<tr>
<td>
<input type="button" value="增加"/>
<img src="images/4.jpg"/>
<input type="button" value="减少"/>
<input type="hidden" value="" />
</td>
</tr>
</table>
</body>
</html>

...全文

540 20 打赏收藏转发到动态举报

写回复

用AI写文章

20 条回复

切换为时间正序

请发表友善的回复…

发表回复

cup_student 2012-03-20

打赏
举报

不说了，结贴

cup_student 2012-03-17

打赏
举报

我会虚心接受各位大侠的建议的，现在还有问题：
asp.net 点击按钮动态产生table,然后通过js对单元格操作了比如：合并，添加图片等,想把改变后的结果保存起来,
把td的合并状态找到了，可是后台获取不了，每次读取该table时，count总为0，我试过在后台不加(!ispostback),但是这样保存不了合并状态，加过ajax,页面还是会刷新，怎么来保存table最后的合并状态？？？？请大侠赐教！给个思路！！

洪爷爷 2012-03-17

打赏
举报

[Quote=引用 16 楼 cup_student 的回复:]
谢谢各位大侠，问题解决了
[/Quote]
记得多学学js，jq只是集合了js，，学jq虽然能很快解决你的问题，但建议新手先学js，，

，
这么多人帮你，希望你别忘了结帖，

cup_student 2012-03-17

打赏
举报

谢谢各位大侠，问题解决了

cup_student 2012-03-17

打赏
举报

可以解决吗

L61551 2012-03-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 runat="server">

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

</head>

<body>

    <table>

        <tr>

            <td>

                <input type="hidden" value="0" id="count" />

                <input type="button" value="增加" id="add" />

                <input type="button" value="减少" id="reduce" />

            </td>

        </tr>

    </table>

    <script type="text/javascript">

        $("#add").bind("click", function () {

            $(this).after("<img src='Images/4.jpg'>");

            var count = $("#count").val();

            $("#count").val(parseInt(count) + 1);

        });



        $("#reduce").bind("click", function () {

            if ($(this).prev("img")[0]) {

                var count = $("#count").val();

                $("#count").val(parseInt(count) - 1);

            }

            $(this).prev("img").remove();

        });

    </script>

</body>

</html>

cup_student 2012-03-16

打赏
举报

贴个例子吧

Im_Sorry 2012-03-16

打赏
举报

删除，得到ID 就可以删除了。删除好像是删除元素的，js也有。你可以查看下！

phoebuswei 2012-03-16

打赏
举报

[Quote=引用 4 楼 cup_student 的回复:]
to phoebuswei :点增加了document.getElementById("table1").rows[0].cells[0].innerHTML+=<img >; 是这样吗？这样添加出来的效果是在后边出来的，现在需要在按钮后边增加图片

to hou306010849 :不懂，能解释下吗
[/Quote]
您叫我解释,我还真不知道从何下口了?:(
这样您看行吗:
得到元素,在元素的0行0列,添加html属性

cup_student 2012-03-16

打赏
举报

to hou306010849 :那减少的时候，怎么弄？现在需要在按钮后边增加图片
，和减少按钮前边减少图片

Im_Sorry 2012-03-16

打赏
举报

用JS，你去查下手册，增加元素的！

cup_student 2012-03-16

打赏
举报

to phoebuswei :点增加了document.getElementById("table1").rows[0].cells[0].innerHTML+=<img >; 是这样吗？这样添加出来的效果是在后边出来的，现在需要在按钮后边增加图片

to hou306010849 :不懂，能解释下吗

Im_Sorry 2012-03-16

打赏
举报

你也就是增加个img标签而已。获取imgID。加个数字在后面就可以无限添加了！

phoebuswei 2012-03-16

打赏
举报

document.getElementById("table1").rows[0].cells[0].innerHTML=<img>;给您随便+个id
取消同样

cup_student 2012-03-16

打赏
举报

自己先顶一下，急求帮助

qqdd2716 2012-03-16

打赏
举报

[Quote=引用 14 楼 qqdd2716 的回复:]

HTML code

<script language="javascript" type="text/javascript">
$(document).ready(function()
{
var tableTd = $('#table1').find('td');
$(tableTd).find('.add')……
[/Quote]

记得添加JQUERY引用在头部

qqdd2716 2012-03-16

打赏
举报



<script language="javascript" type="text/javascript">

        $(document).ready(function()

        {

            var tableTd = $('#table1').find('td');

            $(tableTd).find('.add').click(function()

            {

                alert(1);

                $(this).after('<img src="images/4.jpg"/>');

            });

            $(tableTd).find('.minus').click(function()

            {

                alert(2);

                if ($(this).prev().is('img'))

                {

                    $(this).prev().remove();

                }

            });

        });

    </script>

    

    

    <table id="table1">

        <tr>

            <td>

                <input class="add" type="button" value="增加"/>

                <img src="images/4.jpg"/>

                <input class="minus" type="button" value="减少"/>

                <input type="hidden" value="" />

            </td>

        </tr>

        <tr>

            <td>

                <input class="add" type="button" value="增加"/>

                <img src="images/4.jpg"/>

                <input class="minus" type="button" value="减少"/>

                <input type="hidden" value="" />

            </td>

        </tr>

    </table>