Question

我正在尝试使用

上的动态表格

我想要一个删除表中所有行的按钮。基本上，在类click

的所有实例上触发.table-remove函数

我试着做以下

function deleteAll() {

        jQuery('.table-remove').each(function() {
            var currentElement = $(this);
            console.log(currentElement);
            currentElement.trigger('click');
        });
    }

其中点击定义为

$('.table-remove').click(function() {
            console.log("triggered");
            $(this).parents('tr').detach();
        });

但是当我调用deleteAll函数时没有任何反应。我甚至不在控制台上做任何事情

我正在做这件事吗？

Answer 1

如果目标只是删除行，您可以直接执行此操作而不会触发每个单独的点击事件：

function deleteAll() {
  $('.table-remove').closest('tr').remove()
}

如果你真的需要在每个＆.39上触发点击事件。删除＆＃39;你应该这样做：

function deleteAll() {
  $('.table-remove').each(function() {
    $(this).trigger('click')
  });
}

（...这大致相当于您现有的代码。我不确定为什么您现有的代码不适合您;也许这取决于您使用{{1而不是jQuery()别名，或者您只是没有成功调用$()函数？）

Answer 2

我想要一个删除表中所有行的按钮。所以基本上，在类using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms; using Emgu.CV; using Emgu.CV.Structure; using Emgu.Util; using Emgu.CV.CvEnum; namespace FaceDetectTest { public partial class Form1 : Form { public Capture cap; public CascadeClassifier haar; public int NumberOfFaces; public Rectangle[] Faces; public Form1() { InitializeComponent(); } private void Form1_Load(object sender, EventArgs e) { cap = new Emgu.CV.Capture(0); haar = new CascadeClassifier(@"C:\Users\Rob\AppData\Roaming\masterbeast\haarcascade_frontalface_alt_tree.xml"); NumberOfFaces = 0; } private void timer1_Tick_1(object sender, EventArgs e) { using (Image<Bgr, byte> nextFrame = cap.QueryFrame().ToImage<Bgr, Byte>()) { if (nextFrame != null) { Image<Gray, byte> grayframe = nextFrame.Convert<Gray, byte>(); Faces = haar.DetectMultiScale(grayframe, 1.1, 1, new Size(100, 100), new Size(1000, 1000)); NumberOfFaces = Faces.Length; } pictureBox1.Image = nextFrame.ToBitmap(); textBox2.Text = NumberOfFaces.ToString(); } } } }的所有实例上触发click函数。

你可以这样做，但将桌子组织成简单的方法要简单得多：

包含标题行的.table-remove
包含可见行的<thead>
包含行模板的<tbody>

因此，＆＃34;删除全部＆＃34;背后的代码按钮可以非常简单地选择第一个<tbody>和<tbody>中的所有行。

HTML

.remove()

另一个方面是如何最好地将点击处理程序附加到三行操作 - 删除，上移和下移。

当动态创建/附加行时，要使用jQuery＆＃39; <div class="container"> <h1>HTML5 Editable Table</h1> <p>Through the powers of <strong>contenteditable</strong> and some simple jQuery you can easily create a custom editable table. No need for a robust JavaScript library anymore these days.</p> <ul> <li>An editable table that exports a hash array. Dynamically compiles rows from headers</li> <li>Simple / powerful features such as add row, remove row, move row up/down.</li> </ul> <div id="table" class="table-editable"> <span class="table-add glyphicon glyphicon-plus"></span> <table class="table"> <thead>  <tr> <th>Name</th> <th>Value</th> <th></th> <th></th> </tr> </thead> <tbody class="main">  <tr> <td contenteditable="true">Stir Fry</td> <td contenteditable="true">stir-fry</td> <td> <span class="table-remove glyphicon glyphicon-remove"></span> </td> <td> <span class="table-up glyphicon glyphicon-arrow-up"></span> <span class="table-down glyphicon glyphicon-arrow-down"></span> </td> </tr> </tbody> <tbody class="hide">  <tr> <td contenteditable="true">Untitled</td> <td contenteditable="true">undefined</td> <td> <span class="table-remove glyphicon glyphicon-remove"></span> </td> <td> <span class="table-up glyphicon glyphicon-arrow-up"></span> <span class="table-down glyphicon glyphicon-arrow-down"></span> </td> </tr> </tbody> </table> </div> <button id="export-btn" class="btn btn-primary">Export Data</button> <button id="deleteAll-btn" class="btn btn-primary">Delete All</button> <p id="export"></p> </div>将点击处理委托给容器（例如表）。这会将所需的操作附加到所有当前行，和将来的行，只需附加它们即可。

的Javascript

$(static-container).on(event, descendent-selector, handler)

DEMO

jQuery：触发动态内容事件

2 个答案: