我正在尝试使用
上的动态表格https://codepen.io/ashblue/pen/mCtuA
我想要一个删除表中所有行的按钮。基本上,在类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
函数时没有任何反应。我甚至不在控制台上做任何事情
答案 0 :(得分:1)
如果目标只是删除行,您可以直接执行此操作而不会触发每个单独的点击事件:
function deleteAll() {
$('.table-remove').closest('tr').remove()
}
如果你真的需要在每个&.39上触发点击事件。删除'你应该这样做:
function deleteAll() {
$('.table-remove').each(function() {
$(this).trigger('click')
});
}
(...这大致相当于您现有的代码。我不确定为什么您现有的代码不适合您;也许这取决于您使用{{1而不是jQuery()
别名,或者您只是没有成功调用$()
函数?)
答案 1 :(得分:1)
我想要一个删除表中所有行的按钮。所以基本上,在类
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> <!-- <<<< wrap the header row in <thead>...</thead> -->
<tr>
<th>Name</th>
<th>Value</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody class="main"> <!-- <<<< wrap the visible row(s) in <tbody>...</tbody> -->
<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"> <!-- <<<< wrap the template row in its own hidden <tbody>...</tbody> -->
<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)