Question

我想获得给定表格单元格中textarea个元素的数量。使用它我想一次向一个元素添加删除功能，当且仅当有两个以上，并且如果我点击“撤消”，也可以撤消删除的textarea。链接。以下是一个示例代码段：

<table class="result_table">
    <tr valign="middle" align="center">
        <td style="font-size:13px; " class="tbody_data side">Dissolution</td>
        <td valign="middle" align="center" style="padding: 0px;" class="tbody_data">
            <input type="hidden" value="2" name="tests[]">
            <textarea style="border:none; vertical-align: middle;" class="det_st form-control">UV</textarea>
        </td>
        <td style="padding: 0px;" class="tbody_data">
            <textarea style="border:none;" class="det_st form-control">USP 38 NF 33 Page 4635</textarea>
        </td>
        <td style="padding: 0px;" class="tbody_data">
            <textarea style="border:none;" class="det_st form-control">Acid Stage Not more than 10.0% [n=6]
            </textarea>
            <textarea style="border:none;" class="det_st form-control">Buffer Stage Not Less than 70.0% [n=6]
            </textarea>
        </td>
        <td style="padding: 0px;" class="tbody_data">
            <textarea style="border:none;" class="det_st form-control"> Acid Stage 107.8% (RSD=5.2%; n=6) </textarea>
            <textarea style="border:none;" class="det_st form-control"> Buffer Stage 102.2% (RSD=0.9%; n=6)</textarea>
        </td>
        <td style="padding: 25px;  width:50px;" class="tbody_data side">
            <select style="border:none; margin:15px; width:145px;" class="select" selected="selected">
                <option value="COMPLIES">COMPLIES</option>
                <option value="COMPLIES">COMPLIES</option>
                <option value="DOES NOT COMPLY">DOES NOT COMPLY</option>
            </select>
            <select style="border:none; margin:15px; width:145px;" class="select" selected="selected">
                <option value="COMPLIES">COMPLIES</option>
                <option value="COMPLIES">COMPLIES</option>
                <option value="DOES NOT COMPLY">DOES NOT COMPLY</option>
            </select>
        </td>
    </tr>
</table>

$(document).on('mouseover', '.result_table tr td', function() {
    $('textarea', this).dblclick(function() {
        $(this).remove()
      alert( $(this).length) //gives one even when a cell contains two teatareas
    });
})

建议欢迎。

Answer 1

这应该可以在你的鼠标悬停回调中完成。

var number_of_textareas = $(this).find('textarea').length;

Answer 2

您可以这样做：

$(document).on('mouseover', '.result_table tr td', function() {
  $('textarea', this).dblclick(function() {
    var self = $(this);
    var nbelement = self.parent('td').find('textarea').length;
    if (nbelement >= 2) {
      self.remove()
    }
  });
})

https://jsfiddle.net/Tintin37/z5x4bsuc/

Answer 3

您希望计算textareas单元格中td的数量，并在以下情况下将其删除：

textareas单元格中有2个或更多td。
用户双击textarea。

您还希望能够通过将之前删除的textareas放回DOM中来撤消操作。

您应该使用.detach()代替.remove()。通过这种方式，您可以存储已删除的元素以供进一步使用（撤消）。

以下是带有解释说明的代码 - 在标记上我刚刚添加了button以使撤消操作成为可能：

$(function() {
    // Initialize an array to store all the removed textareas.
    var removedTextAreas = [];    

    $(".result_table tr td").on("mouseover", function() {
        // How many textareas within this cell?
        var numberOfTextAreas = $("textarea", this).length;

        // Handle the double click event.
        handleDblClick(numberOfTextAreas, this);
    });

    $("#undo").on("click", function() {
        // Is there anything removed and not undone?
        if (removedTextAreas.length > 0) {
            // The undo goes from the last to the first in the list.
            // We always re-attach the last one that has been removed.
            var itemPos = removedTextAreas.length - 1;
            var reAttach = removedTextAreas[itemPos];
            var previous = reAttach.previous;
            var next = reAttach.next;

            if (previous.length > 0) {
                // The removed element had a sibling before it,
                // so let's append it back after this sibling.
                reAttach.textarea.appendTo(reAttach.cell);
            }
            else {
                // The removed element had a sibling after it,
                // so let's append it back before this sibling.
                reAttach.textarea.prependTo(reAttach.cell);
            }

            // We now can remove this item from the list of
            // removed textareas.
            removedTextAreas.splice(itemPos);
        }
    });

    // Let's separate concerns by creating a function.
    // This way you can also reduce the code within the caller.
    function handleDblClick(numberOfTextAreas, el) {
        // The target for the double click.
        var target = $("textarea", el);

        // Let's unbind the double click to start with.
        target.off("dblclick");

        // Two or more textareas?
        if (numberOfTextAreas >= 2) {
            target.on("dblclick", function() {
                // Let's store the removed textarea and some details
                // to identify its current parent and siblings.
                removedTextAreas.push({
                    cell: $(this).closest("td"),
                    previous: $(this).prev("textarea"),
                    next: $(this).next("textarea"),
                    textarea: $(this).detach()                    
                });
            });
        }        
    }
});

Demo

注意：您可能需要稍微调整一下您确定重新附加元素的位置，但我确定您有这个想法。

检查元素数量jQuery

3 个答案: