当前位置： 文江博客话题详情

jQuery - 添加/删除表格行

发布于 2024-09-07 05:29:58 字数 4063 浏览 5 评论 0原文

根据我在右侧的选择，我动态地构造（克隆）左侧的一组行。我还添加了一个“删除”按钮。我无法从该按钮调用 jQuery 函数。另外，单击“删除”按钮后，如何将右侧相应行的复选框设置为之前的状态（选中）。下面有全部代码。 谢谢。

例子

<script type="text/javascript">
$(document).ready(function(){

    $("#row_remove").click(function() {       
    alert("1");
    });

 $('#tb11 tr')
 .filter(':has(:checkbox:checked)')
 .addClass('selected')
 .end()
  .click(function(event) {
    //alert("1");

    $(this).toggleClass('selected');

        if (event.target.type !== 'checkbox') {

            $(':checkbox', this).attr('checked', function() {

                if ($(this).is(":checked"))
                {
                  $(this).closest("tr").clone().appendTo("#tbl2").append("<label><input type='text' name='textfield' id='textfield'/></label><button id='row_remove'>remove</button>");

                  //ac 1
                  var findCheckBox = $("#tbl2 input:checkbox.chkclass");
                  findCheckBox.remove();

                }
                else
                {
                  var index = $(this).closest("tr").attr("id");
                  var findRow = $("#tbl2 tr[id='" + index + "']");
                  findRow.remove();
                }

            return !this.checked;

            });
        }
  });

});
</script>

<style type="text/css">

table {
    text-align: center;
}
.right {
    text-align: left;
}
.right {
    text-align: left;
}

  article, aside, figure, footer, header, hgroup,
  menu, nav, section { display: block; }

</style>
</head>

<body>
<table width="100%" border="0" cellpadding="4">
  <tr>
    <td width="32%" rowspan="3" valign="top" bgcolor="#EAEAEA">

    <table width="100%" border="0">

      <tr id="tbl2" width="100%">
       <!-- <td height="101" valign="top" bgcolor="#FFFFFF" class="right">&nbsp;</td>-->
      </tr>
    </table></td>
    <td width="1%" bgcolor="#EAEAEA">&nbsp;</td>
    <td width="67%" colspan="3" rowspan="3" valign="top" bgcolor="#EAEAEA">

    <table id="tb11" width="100%" border="0">
    <tbody>
      <tr id="1">
        <td width="5%" height="20" valign="top" bgcolor="#FFFFFF"><input type="checkbox"  class="chkclass"  value="yes" checked="checked" /></td>
        <td width="95%" valign="top" bgcolor="#FFFFFF" class="right">item 1</td>
      </tr>
      <tr id="2">
        <td width="5%" height="20" valign="top" bgcolor="#FFFFFF"><input type="checkbox"  class="chkclass"  value="yes" checked="checked"  /></td>
        <td width="95%" height="20" valign="top" bgcolor="#FFFFFF" class="right">item 2</td>
      </tr>
      <tr id="3">
        <td width="5%" height="20" valign="top" bgcolor="#FFFFFF"><input type="checkbox"  class="chkclass"  value="yes" checked="checked"  /></td>
        <td width="95%" height="20" valign="top" bgcolor="#FFFFFF" class="right">item 3</td>
      </tr>
      <tr id="4">
        <td width="5%" height="20" valign="top" bgcolor="#FFFFFF"><input type="checkbox"  class="chkclass"  value="yes"  checked="checked" /></td>
        <td width="95%" height="20" valign="top" bgcolor="#FFFFFF" class="right">item 4</td>
      </tr>
      <tr id="5">
        <td width="5%" height="20" valign="top" bgcolor="#FFFFFF"><input type="checkbox"  class="chkclass"  value="yes" checked="checked"  /></td>
        <td width="95%" height="20" valign="top" bgcolor="#FFFFFF" class="right">item 5</td>
      </tr>
      </tbody>
    </table>

    </td>
  </tr>
  <tr>
    <td bgcolor="#EAEAEA">&nbsp;</td>
  </tr>
  <tr>
    <td bgcolor="#EAEAEA">&nbsp;</td>
  </tr>
</table>

</body>
</html>
原文

From my selection on the right I dynamically construct (clone) a set of rows to the left. There I also add a REMOVE button. I can't call a jQuery function from that button. Also upon clicking the REMOVE button how can I set the checkbox of the respective row on the right to its previous state (checked). There is all the code below.
Thank you.

Example

</script>

<script type="text/javascript">
$(document).ready(function(){

    $("#row_remove").click(function() {       
    alert("1");
    });

 $('#tb11 tr')
 .filter(':has(:checkbox:checked)')
 .addClass('selected')
 .end()
  .click(function(event) {
    //alert("1");

    $(this).toggleClass('selected');

        if (event.target.type !== 'checkbox') {

            $(':checkbox', this).attr('checked', function() {

                if ($(this).is(":checked"))
                {
                  $(this).closest("tr").clone().appendTo("#tbl2").append("<label><input type='text' name='textfield' id='textfield'/></label><button id='row_remove'>remove</button>");

                  //ac 1
                  var findCheckBox = $("#tbl2 input:checkbox.chkclass");
                  findCheckBox.remove();

                }
                else
                {
                  var index = $(this).closest("tr").attr("id");
                  var findRow = $("#tbl2 tr[id='" + index + "']");
                  findRow.remove();
                }

            return !this.checked;

            });
        }
  });

});
</script>

<style type="text/css">

table {
    text-align: center;
}
.right {
    text-align: left;
}
.right {
    text-align: left;
}

  article, aside, figure, footer, header, hgroup,
  menu, nav, section { display: block; }

</style>
</head>

<body>
<table width="100%" border="0" cellpadding="4">
  <tr>
    <td width="32%" rowspan="3" valign="top" bgcolor="#EAEAEA">

    <table width="100%" border="0">

      <tr id="tbl2" width="100%">
       <!-- <td height="101" valign="top" bgcolor="#FFFFFF" class="right"> </td>-->
      </tr>
    </table></td>
    <td width="1%" bgcolor="#EAEAEA"> </td>
    <td width="67%" colspan="3" rowspan="3" valign="top" bgcolor="#EAEAEA">

    <table id="tb11" width="100%" border="0">
    <tbody>
      <tr id="1">
        <td width="5%" height="20" valign="top" bgcolor="#FFFFFF"><input type="checkbox"  class="chkclass"  value="yes" checked="checked" /></td>
        <td width="95%" valign="top" bgcolor="#FFFFFF" class="right">item 1</td>
      </tr>
      <tr id="2">
        <td width="5%" height="20" valign="top" bgcolor="#FFFFFF"><input type="checkbox"  class="chkclass"  value="yes" checked="checked"  /></td>
        <td width="95%" height="20" valign="top" bgcolor="#FFFFFF" class="right">item 2</td>
      </tr>
      <tr id="3">
        <td width="5%" height="20" valign="top" bgcolor="#FFFFFF"><input type="checkbox"  class="chkclass"  value="yes" checked="checked"  /></td>
        <td width="95%" height="20" valign="top" bgcolor="#FFFFFF" class="right">item 3</td>
      </tr>
      <tr id="4">
        <td width="5%" height="20" valign="top" bgcolor="#FFFFFF"><input type="checkbox"  class="chkclass"  value="yes"  checked="checked" /></td>
        <td width="95%" height="20" valign="top" bgcolor="#FFFFFF" class="right">item 4</td>
      </tr>
      <tr id="5">
        <td width="5%" height="20" valign="top" bgcolor="#FFFFFF"><input type="checkbox"  class="chkclass"  value="yes" checked="checked"  /></td>
        <td width="95%" height="20" valign="top" bgcolor="#FFFFFF" class="right">item 5</td>
      </tr>
      </tbody>
    </table>

    </td>
  </tr>
  <tr>
    <td bgcolor="#EAEAEA"> </td>
  </tr>
  <tr>
    <td bgcolor="#EAEAEA"> </td>
  </tr>
</table>

</body>
</html>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

攒眉千度 2024-09-14 05:29:58

元素ID属性值必须是唯一的！永远记住这一点！

查看 clone() 文档。此方法有可选参数“withDataAndEvents”，默认情况下为 false。

Element ID attribute value must be unique!!! Remember this forever!

Check out clone() docs. This method has optional parameter "withDataAndEvents" which is false by default.

回复 原文
~没有更多了~

关于作者

鸠书

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

烙印

文章 0 评论 0

singlesman

文章 0 评论 0

给自己一个微笑

文章 0 评论 0

独孤求败

文章 0 评论 0

晨钟暮鼓

文章 0 评论 0

我是自愿种绣球花的

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文