We Keep Coding

Add event listener to dynamically create table row

I have a table with ajax call to create rows within the tbody element. I have the table created on the html page.
<table id='mytable'>
<thead>
<tr>
<th>First Col</th>
<th>Second Col</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
My javascript code to attach the event to second cell of each row in tbody
$('#mytable tbody').on( 'click', 'tr td:eq(2)', function() {
console.log($(this).html())
});
This code only works for the second cell of the first row of the tbody. Clicking the second cell of all other rows did not trigger the event. I have to work around this by check the cell index
if (this.cellIndex == 2) console.log($(this).html())
I still want to know how to make the correct selection.

To select the specific td of each row use nth-child() instead of eq():
$('#mytable tbody').on( 'click', 'tr td:nth-child(3)', function() {
console.log($(this).html())
});

You can just have an event listener for the entire table and then test what was clicked. Adding the event listener to the table you don't need to assign it again if the content of the table changes.
Adding a class name can both be useful for the usability (styling the cursor) and easier to find elements using JS.
document.getElementById('mytable').addEventListener('click', e => {
let td = e.target.closest('td[class="clickable"]');
if (td) {
console.log(e.target.innerText, 'was clicked');
}
});
td.clickable {
cursor: pointer;
}
<table id='mytable'>
<thead>
<tr>
<th>First Col</th>
<th>Second Col</th>
</tr>
</thead>
<tbody>
<tr>
<td>First</td>
<td class="clickable">Second 1</td>
</tr>
<tr>
<td>First</td>
<td class="clickable">Second 2</td>
</tr>
<tr>
<td>First</td>
<td class="clickable">Second 3</td>
</tr>
<tr>
<td>First</td>
<td class="clickable">Second 4</td>
</tr>
</tbody>
</table>

How to toggle table in column on button click using jQuery's toggleClass

So, I want to be able to toggle a column in a table on a button click.
I looked into jQuery's toggle class function and figured I could give the th (table header) and td (cell in HTML table) the same class and then do a toggleClass on a button click.
Here's my table in my Dashboard.tsx file:
<table>
<thead>
<tr>
<th class="lastname">LastName</th>
<tr>
</thead>
<tbody>
{
this.1stUserInfo.map((value, index, array) => {
return(
<tr>
<td class="lastname">{value.LastName}</td>
</tr>);
}, this)
}
</tbody>
</table>
Here's my button:
<Button id="lastnamebutton" onClick={(e) => this.ShowLastName(e,this)}>Toggle Last Name</Button>
And here's my function in my JavaScript where I implement toggleClass
public ShowLastName(event, caller) {
$("#lastnamebutton").toggleClass(".lastname");
}
What am I doing wrong and/or can you think of another way I can toggle a column in my table?

The toggleClass() is invoked on the incorrect elements. Instead of #lastnamebutton, it should be invoked on .lastname.
Here is an example (BTW, this case is not related with React):
window.toggleColumn = function() {
$('.yclass').toggleClass('hide');
};
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<th>X</th>
<th class="yclass">Y</th>
<th>Z</th>
</thead>
<tbody>
<tr>
<td>42</td>
<td class="yclass">45</td>
<td>46</td>
</tr>
<tr>
<td>72</td>
<td class="yclass">62</td>
<td>22</td>
</tr>
</tbody>
</table>
<button onclick="window.toggleColumn()">
Click
</button>

get all data-task-id from table rows

I have this table
<table id="tblTasks">
<thead>
<tr>
<th>Name</th>
<th>Due</th>
<th>Category</th>
<th>Action</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
I have a table as above and script as below
<script id="taskRow" type="text/x-jQuery-tmpl">
<tr>
<td>${task}</td>
<td>
<time datetime="${requiredBy}">${requiredBy}</time>
</td>
</td>
<td>${category}</td>
<td>
<nav>
Edit
Complete
Delete
</nav>
</td>
</tr>
</script>
Basically, how it works at the moment is when I click the Delete button the code below will run
storageEngine.delete('task', $(evt.target).data().taskId, ....
taskId is the value from data-task-id="${id}" now, I have another button that delete all the tasks. I'm trying to cycle through all the rows in the table and find the Delete button then apply the storageEngine.delete but don't know how.
How can I do this?

Try this:
var dataList = $(".deleteRow").map(function() {
return $(this).data("task-id");
}).get();
console.log(dataList.join('|'));

Convert multiple tables to one table inside same DIV using jQuery

I have multiple tables inside div with same columns and I want them to convert to one table with all records from that tables.
Can it be done with jQuery?
My HTML looks like this:
<div id="multiTabels">
<table id="table1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Record 1</td>
<td>Record 2</td>
</tr>
</table>
<table id="table1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Record 3</td>
<td>Record 4</td>
</tr>
</table>
</div>

Try this :
$(function(){
var $firstTable = $('#multiTabels table:first');
$('#multiTabels table:not(:first)').each(function(){
$firstTable.append($(this).find('tr').has('td'));
$(this).remove();
});
});
JSfiddle Demo

Anything can be done with jQuery.
There's a really big thing to point out with my jsFiddle: I am using the thead and tbody tags. This is really important for segregating rows and is a semantic step forward in HTML. If you inspect tables in your dev console, you'll notice most browsers automatically add a tbody around all tr elements in a table now, so it's good to start doing this.
https://jsfiddle.net/wumztk45/
// This binds a hook to the document.
// If any 'click' events happen to an element with the id "cruch" this event fires.
// This event will persist even when crunch is deleted, and is good
// for when binding to elements that may not exist at the time.
$(document).on('click', "#crunch", function(event) {
// Find our container.
var $multiTables = $("#multiTables"),
// Find all tables in our container.
$tables = $multiTables.children("table"),
// From all tables after the first, find all <tr> elements within <tbody> elements.
$rows = $tables.not(":first").children("tbody").children("tr");
// Append these rows to the first table's tbody.
$tables.first().children("tbody").append( $rows );
// Remove the other tables.
$tables.not(":first").remove();
// Disable this button.
$(this).prop( 'disabled', true );
} );

Try this:
$(document).ready(function (){
$("#multiTabels table tr").each(function(){
$("#newTable").append($(this)); //append to any new table
});
});

Add table row with jQuery before button

I have this table, and I want to add Rows up the button, in the same rowId. For example, on clicking the Add Row 1 button, i want to add a row in row1, under "Some content 1", and so on.
<table id="table1">
<thead>
<th>Heading 1</th>
<th>Heading 2</th>
</thead>
<tbody>
<tr id="row1">
<td>Some content 1<td>
<td><button id="addButton1">Add Row 1</button><td>
</tr>
<tr id="row2">
<td>Some content 2<td>
<td><button id="addButton2">Add Row 2</button><td>
</tr>
<tbody>
</table>
This is the script I use so far:
$("#addBtn").on("click", function () {
$("#table1 tbody").append("<tr><td>1</td><td>1</td></tr>");
});
This is adding rows at the end of the table. How can I add rows in between, in the same section, using jQuery?

Try to use .closest() along with .after() to achieve what you want, and you should use id starts with selector in this context or you can add one common class for all of that buttons and use that as a selector.
$("[id^=addButton]").on("click", function () {
$(this).closest('tr').after("<tr><td>1</td><td>1</td></tr>");
});
Side Note: I have edited some of your ugly html in order to make your code valid
DEMO

You can do like this.
$("#table1 button").on("click", function () {
$(this).parents('tr').after("<tr><td>1</td><td>1</td></tr>");
});