相关疑难解决方法(0)

我想在单击标题列时展开和折叠表行.我只想展开/折叠特定标题下的行(单击).

这是我的表结构:

 <table border="0">
      <tr>
        <td colspan="2">Header</td>
      </tr>
      <tr>
        <td>data</td>
        <td>data</td>
      </tr>
      <tr>
        <td>data</td>
        <td>data</td>
      </tr>
      <tr>
        <td colspan="2">Header</td>
      </tr>
      <tr>
        <td>date</td>
        <td>data</td>
      </tr>
      <tr>
        <td>data</td>
        <td>data</td>
      </tr>
      <tr>
        <td>data</td>
        <td>data</td>
      </tr>
    </table>

关于如何完成这项任务的任何想法.使用div这个任务看起来很简单,但我有表格数据,我想操纵.

我能想到的一个想法是在每一行中使用css类来区分每个标题下的行,并仅在单击标题时使用JQuery展开/折叠这些行.但是如果我的表有10-15个标题,那么跟踪css类似乎很难.

请建议一个合适的方法来实现这一目标.

我有一个按钮:

<input type="submit" id="submit" value="Save" />

在jQuery中我使用以下内容,但它仍然允许双击:

<script type="text/javascript">

$(document).ready(function () {

    $("#submit").one('click', function (event) {  

有关如何防止双击的任何想法？

当使用jQuery slideToggle()函数在表中的新行上显示/隐藏数据时,它会导致它断断续续.然而,当slideToggle()用于显示/隐藏<div>它时,它的工作非常顺利.

谁能告诉我为什么会这样？

小提琴示例:http://jsfiddle.net/gLGUG/

jQuery代码:

$("tr").click(function () {
    $(".slideMe").slideToggle();
});

$(".slideMeDiv, button").click(function () {
    $(".slideMeDiv").slideToggle();
});

HTML标记:

<table>
    <tr>
        <td>One Row</td>
    </tr>
    <tr>
        <td>Click me</td>
    </tr>
    <tr class="slideMe">
        <td>SlideDOWN</td>
    </tr>
</table>
<br />
<button>Slide Div</button>

<div class="slideMeDiv">
    Slide me as well
</div>

我有一个包含有效和无效项目的表格.此表是从数据库动态填充的.我正在尝试为我的表中的非活动项添加切换并显示所有活动项.我的意思是我想显示所有活动项目并在我的表格中仅滑动切换非活动项目.

<div class="alertsList">
    <table width="100%">
        <tbody>
            <tr>
                <th></th>
                <th>Id</th>
                <th>From</th>
                <th>Action</th>
                <th>State</th>
                <th>time</th>
                <tr class="alertRow">
                    <td></td>
                    <td>1025973</td>
                    <td>SYSTEM</td>
                    <td>false</td>
                    <td class="Active">Active</td>
                    <td>2014-09-23T00:59:26.92</td>
                </tr>
                <tr class="alertRow">
                    <td></td>
                    <td>1025974</td>
                    <td>SYSTEM</td>
                    <td>false</td>
                    <td class="Active">Active</td>
                    <td>2014-09-23T00:59:26.92</td>
                </tr>
                <tr class="alertRow">
                    <td></td>
                    <td>1025974</td>
                    <td>SYSTEM</td>
                    <td>false</td>
                    <td class="InActive">InActive</td>
                    <td>2014-09-23T00:59:26.92</td>
                </tr>
                <tr class="alertRow">
                    <td></td>
                    <td>1025974</td>
                    <td>SYSTEM</td>
                    <td>false</td>
                    <td class="InActive">InActive</td>
                    <td>2014-09-23T00:59:26.92</td>
                </tr>
                <tr class="alertRow">
                    <td></td>
                    <td>1025974</td>
                    <td>SYSTEM</td>
                    <td>false</td>
                    <td class="Active">Active</td>
                    <td>2014-09-23T00:59:26.92</td>
                </tr>
        </tbody>
    </table>
</div>

$('.alertRow.InActive').Parent.click(function () {

    $(this).nextUntil('tr.td.InActive').slideToggle(1000);
});

我的小提琴代码

我怎样才能做到这一点..？

我希望表行消失(通过将其高度设置为0px,将不透明度设置为0).我正在使用以下内容

$('#somecellelement').closest('tr').children('td').css('overflow','hidden');
$('#somecellelement').closest('tr').children('td').animate({
    height: '0px',
    opacity: 0
},500);

当#somecellelement被包含在列的电池我想要的东西隐藏.Opacity是正确动画,但表行不会变小.如果我设置height: 500px然后它工作,但我需要行消失.

但是,由于脚本需要来自这些行中的表单元素的值,因此无法从DOM中删除该元素.

我正在尝试创建一个将文件输入字段附加到div的字段集,并使用slidedown()函数显示新创建的字段.这个简单的代码正是我需要做的,但我无法弄清楚如何集成slidedown动作.我确实提出了一个解决方案几乎就是隐藏div#add_pic,附加新字段,然后slidingown()它但它看起来非常糟糕.有没有人有这个优雅的解决方案？谢谢!!

function add_file_input() {

$('div#add_pic').append("<label>Artist Pic:</label><input type='file' name='pics[]'><br     />");

}

$(document).ready(function(){

$('a#add_field').click(add_file_input);

})

我使用下面的代码向下滑动一行，但 jQuerydisplay: block在该行上强制执行，而它应该是table-row，从而破坏了样式。

小提琴： http: //jsfiddle.net/7Ay3z/

我手动将其设置table-row为完成后，但这太可怕了。我该如何解决这个问题？

<style>
table {
    margin: 25px;
}
tr {
    background-color: #c00;
    color: #fff;
    border: 1px solid #000;
    padding: 10px;
}
</style>
<table>
    <tr>
        <td>a</td>
        <td>b</td>
        <td>c</td>
        <td>d</td>
        <td style="display:none;">1</td>
    </tr>
</table>

jQ:

$("tr").click(function(){
    var row = $(this);
    var visibleLength = row.find("td:visible").length;
    var hiddenLength = row.find("td:not(:visible)").length;
    var drillRow = $("<tr/>").addClass("drillDownRow");
    var drillColumn = $("<td/>").attr("colspan", visibleLength);
    var drillHidden = $("<td/>").attr("colspan", hiddenLength).css({display: "none"});

    drillColumn.html("test <b>2</b>... ok");

    drillRow.hide().append(drillColumn).append(drillHidden).insertAfter(row);
    drillRow.slideDown("slow",function() {$(this).css({display: "table-row"})});
});

我正在构建一个相当复杂的UI小部件,在Chrome中存在一些问题.我能够找出问题并在http://jsfiddle.net/8Kb3B/展示它

我有一个div内部td,我试图用jQuery切换div .animate().Chrome中发生的情况是,td当div返回到原始宽度时,它不会重新生长.此外,如果你密切注意"隐藏"动画的结束,你会看到td宽度在内容的宽度上短暂闪烁div,我觉得很奇怪.

.toggle(delay)使用时会发生同样的事情.如果我.toggle()毫不拖延地使用,整个过程就像预期的那样.

动画可以在Mozilla的产品中正常运行,甚至可以在IE中使用.

我错过了一些非常简单的东西吗？

如何为上下排序运动添加动画移动效果.

您可以通过单击向上和向下文本链接来检查移动.

这是我的代码

$(document).ready(function(){
    $('.move-up').click(function(){
        if ($(this).prev())
            $(this).parent().insertBefore($(this).parent().prev());
    });
    $('.move-down').click(function(){
        if ($(this).next())
            $(this).parent().insertAfter($(this).parent().next());
    });
});

DEMO

我正在使用这个非常简单的jQuery代码:

            $("h3").click(function(){
                $(this).next("table").slideToggle("slow");
            });

结果本身实际上是有效的,桌子确实在点击时出现/消失,但是没有"幻灯片"的效果 - 我试过没有"慢"和"慢" - 同样的结果!？

它几乎就像我只是使用.toggle()......

我不知道除了桌子的大小之外还有什么可能是错的,这只是最多12行.

有任何想法吗？

在我看来,我有两个div,一个负责在我的数据库中添加一个条目,另一个负责在页面加载时显示我的所有数据库表行.负责显示我的表内容的div使用Datatables jQuery插件,这使得我的生活更容易显示这些内容.

这两个div都可以单独使用.但是,我想将它们集成在一起,这样当我使用我的第一个div添加一个条目时,数据库就会更新,然后这个条目会附加到我的第二个div中的Datatable中,而不会重新加载整个页面.

我知道,这个过程中单独容易足够使用数据表API,只需通过使用row.add()和绘制()函数,这是可以做到,并且表现出在这里.

虽然这是一个潜在的解决方案,但我并不完全满意,因为我的页面的其余部分使用jQuery的slideDown()来获得整洁的动画,我希望我可以应用这个动画来向我的数据表添加另一行.如果你看看他们的例子,它只是插入行,但如果我可以从表中向下滑动它会更好看.

这可以在不花太多时间的情况下完成吗？或者我应该坚持使用Datatables API并放弃尝试动画它？我已经尝试过使用jQuery手动附加一个新行,但它看起来很糟糕,因为我不认为我可以重新加载插件来采用更改为Datatable.

有人可以指点我正确的方向吗？谢谢!

我正在尝试使用 jQuery 将一行附加到表中，并在加载时仅在该行上应用 slideDown 效果（对于上下文，结果是通过 Ajax 检索的，并在收到时添加）。

当我添加行而没有影响时，表格会正确形成。当我使用淡入作为效果时，表格仍然正确形成。但是，当我使用 slideDown 作为效果时，表格行变得“损坏”并且列无法正确排列。

我有一张这样的表：

<div id="results">
  <table>
    <thead>
      <tr><td>Col1</td><td>Col2</td></tr>
    </thead>
  </table>
</div>

我的 Javascript 如下所示：

$("<tr><td>val1</td><td>val2</td></tr>")
 .hide().slideDown("slow")
 .appendTo("#results table tbody");

我也试过这个：

$("#results table tbody")
  .append("<tr><td>val1</td><td>val2</td></tr>")
  .find("tr:last").hide().slideDown("slow");

这里的第二个选项正确显示了效果，但正如我所提到的那样会使表格出现乱码。

这可能吗？

我正在 Chrome 4 中测试这个（这可能是问题吗？）

我正在尝试使用上一篇文章在表行中实现向下滑动

我有一个newrole表格,我点击添加图标,它被添加到rolecart表格中,每个项目有3行.第一行从角色表中复制,使用jQuery添加下两行,下面是代码.

$("#table_newrole img.move-row").live("click", function() {
    var tr = $(this).closest("tr").remove().clone(); 
    tr.find("img.move-row")
        .attr("src", "/gra/images/icons/fugue/cross-circle.png")
        .attr("alt", "Remove");

    // first row copied from the source table as it is
    $("#table_rolecart tbody").append(tr); 

    // next two rows added like this
    var $inputtr = $('<tr><td colspan="3">Business Justification: &nbsp;<input type="text" id="ar_businessjust"></td></tr><tr><td colspan="2">Start Date: <input type="text" id="ar_startdate"></td> <td colspan="1">End Date: <input type="text" id="ar_enddate"></td></tr>');

    $("#table_rolecart tbody").append($inputtr);
});

当我将下一个项目添加到购物车时,我希望上一个项目的最后两行向上滑动(我稍后将提供并向下滑动图标以显示这些行)

需要知道如何实现这一点.更具体地说,我需要知道如何选择最近2行的前一个购物车项目,然后将幻灯片应用于div.