We Keep Coding

How to remove the contents of a <td> in a table dynamically using JS

I want when the user clicks the button with the class name "removeElement" the next "td" with class "forRemove" should have its contents removed.
How can I do it?
<table class="table">
<tbody class="list" id="list">
<tr>
<td>BODY 1</td>
<td>BODY 2</td>
<td>
<button class="removeElement">removeNextTd</button>
</td>
<td class="forRemove">BODY 4</td>
</tr>
<tr>
<td>BODY 1</td>
<td>BODY 2</td>
<td>
<button class="removeElement">removeNextTd</button>
</td>
<td class="forRemove">BODY 4</td>
</tr>
<tr>
<td>BODY 1</td>
<td>BODY 2</td>
<td>
<button class="removeElement">removeNextTd</button>
</td>
<td class="forRemove">BODY 4</td>
</tr>
</tbody>
</table>

The solution to your problem is here.
$('.removeElement').click(function(e){
$(this).parent().next().remove();
});
Also, I create the fiddle for you.
checkout this

<table class="table">
<tbody class="list" id="list">
<tr>
<td>BODY 1</td>
<td>BODY 2</td>
<td>
<button class="removeElement">removeNextTd</button>
</td>
<td class="forRemove">BODY 4</td>
</tr>
<tr>
<td>BODY 1</td>
<td>BODY 2</td>
<td>
<button class="removeElement">removeNextTd</button>
</td>
<td class="forRemove">BODY 4</td>
</tr>
<tr>
<td>BODY 1</td>
<td>BODY 2</td>
<td>
<button class="removeElement">removeNextTd</button>
</td>
<td class="forRemove">BODY 4</td>
</tr>
</tbody>
</table>
<script>
const buttons = document.getElementsByClassName('removeElement');
for(let i =0; i < buttons.length; ++i) {
buttons[i].onclick = function(event) {
const parent = event.currentTarget.parentNode.parentNode;
parent.children[parent.children.length - 1].innerHTML = "";
}
}
</script>
Is this more or less what you're looking for? To be honest I wouldn't access table elements like this, this is doing a bit much for such simple functionality, for exmaple, on the buttons I would add an indexer at the end of the class name or id, I would use IDs for in this case not only because is faster but also because you'd want quicker access to these elements without the hassle of having to go through so many nodes. i.e.:
<table class="table">
<tbody class="list" id="list">
<tr>
<td>BODY 1</td>
<td>BODY 2</td>
<td>
<button id="removeElement-0" class="removeElement">removeNextTd</button>
</td>
<td class="forRemove-0">BODY 4</td>
</tr>
<tr>
<td>BODY 1</td>
<td>BODY 2</td>
<td>
<button id="removeElement-1" class="removeElement">removeNextTd</button>
</td>
<td class="forRemove-1">BODY 4</td>
</tr>
<tr>
<td>BODY 1</td>
<td>BODY 2</td>
<td>
<button id="removeElement-2" class="removeElement">removeNextTd</button>
</td>
<td class="forRemove-2">BODY 4</td>
</tr>
</tbody>
</table>
<script>
const buttons = document.getElementsByClassName('removeElement');
for(let i =0; i < buttons.length; ++i) {
buttons[i].onclick = function(event) {
document.getElementsByClassName("forRemove-"+event.currentTarget.id[event.currentTarget.id.length-1])[0].innerHTML = "";
}
}
</script>
But Whatever works for you mate.

This clears the td. It is still there so the table wouldn't brake, but it is emty.
$('.removeElement').on('click', function() {
$(this).closest('tr').find('.forRemove').empty();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tbody class="list" id="list">
<tr>
<td>BODY 1</td>
<td>BODY 2</td>
<td>
<button class="removeElement">removeNextTd</button>
</td>
<td class="forRemove">BODY 4</td>
</tr>
<tr>
<td>BODY 1</td>
<td>BODY 2</td>
<td>
<button class="removeElement">removeNextTd</button>
</td>
<td class="forRemove">BODY 4</td>
</tr>
<tr>
<td>BODY 1</td>
<td>BODY 2</td>
<td>
<button class="removeElement">removeNextTd</button>
</td>
<td class="forRemove">BODY 4</td>
</tr>
</tbody>
</table>

This will remove the contents of the next TD, with the class forRemove
$(".removeElement").on("click", function() {
$(this).closest("tr").find(".forRemove").empty();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table">
<tbody class="list" id="list">
<tr>
<td>BODY 1</td>
<td>BODY 2</td>
<td>
<button class="removeElement">removeNextTd</button>
</td>
<td class="forRemove">BODY 4</td>
</tr>
<tr>
<td>BODY 1</td>
<td>BODY 2</td>
<td>
<button class="removeElement">removeNextTd</button>
</td>
<td class="forRemove">BODY 4</td>
</tr>
<tr>
<td>BODY 1</td>
<td>BODY 2</td>
<td>
<button class="removeElement">removeNextTd</button>
</td>
<td class="forRemove">BODY 4</td>
</tr>
</tbody>
</table>
In short, when you click the button it will find the nearest tr element by traversing up the DOM tree, and then find the element within that with the class forRemove, and then empty() it.

not exactly what you asked but you can do it like this with jquery
$this .parent()
.parent()
.remove();
since the delete button is within the row you want to delete this should work

Find and display only the highest score in the table

I was hoping you could help me with my code..
I have an HTML table with dynamically added data.
So, I wanted to create a filter for it so the same test taken by the same person be removed and display only one per person and get only the highest score.
<table class="test-table">
<thead>
<tr role="row">
<th> Name </th>
<th> Test </th>
<th> Date </th>
<th> Score </th>
</thead>
<tbody>
<tr role="row">
<td title="Name">John Doe</td>
<td title="Test">Exam 1</td>
<td title="Date">02/11/2017</td>
<td title="Score">8</td>
</tr>
<tr role="row">
<td title="Name">John Doe</td>
<td title="Test">Exam 1</td>
<td title="Date">02/11/2017</td>
<td title="Score">3</td>
</tr>
<tr role="row">
<td title="Name">Jane Doe</td>
<td title="Test">Exam 1</td>
<td title="Date">02/11/2017</td>
<td title="Score">8</td>
</tr>
<tr role="row">
<td title="Name">Jane Doe</td>
<td title="Test">Exam 2</td>
<td title="Date">02/11/2017</td>
<td title="Score">8</td>
</tr>
</tbody>
</table>
So it should only display Jonh Doe's Exam 1 with the score of 8.
But show both of Jane Doe's because it's two different exams..
Now, I have a script that search for the duplicates but I'm currently stuck..
var nTds = document.querySelectorAll('[title="Name"]'),
tTds = document.querySelectorAll('[title="Test"]'),
test = [],
names = [];
for (var i = 0; i < nTds.length; i++) {
names.push(nTds[i].textContent);
}
for (var i = 0; i < tTds.length; i++) {
test.push(tTds[i].textContent);
}
const nCount = names =>
names.reduce((a, b) =>
Object.assign(a, {
[b]: (a[b] || 0) + 1
}), {})
const tCount = test =>
test.reduce((a, b) =>
Object.assign(a, {
[b]: (a[b] || 0) + 1
}), {})
const duplicates = dict =>
Object.keys(dict).filter((a) => dict[a] > 1)
console.log(duplicates(tCount(test)))
console.log(duplicates(nCount(names)))
Thank you so much! any help would be appreciated..

With a checkbox button you can show/hide as you please. Let me know what you don't understand.
function duplicate_hide()
{
var table_rows = document.querySelectorAll('tbody tr');
var unique = {};
var selection = ["Name", "Test", "Score"];
for (row of table_rows)
{
var temp = [];
for (select of selection)
{
temp.push(row.querySelector(`td[title="${select}"]`));
}
// Destructuring assignment
var [the_name, the_test, the_score] = temp;
the_name = the_name.innerHTML;
the_test = the_test.innerHTML;
the_score = the_score.innerHTML == " " ? 0 : the_score.innerHTML;
if (the_name in unique && the_test in unique[the_name])
{
//same test, saved score is lower than current score, hide previous row
if (+unique[the_name][the_test].score < +the_score)
{
unique[the_name][the_test].row.className = "hidden";
unique[the_name][the_test].score = the_score;
unique[the_name][the_test].row = row;
}
else
{
row.className = "hidden";
}
}
else
{
// Create new object if it doesn't exist on name
if (!(the_name in unique))
{
unique[the_name] = {};
}
unique[the_name][the_test] = {score: the_score, row};
}
}
}
function duplicate_show()
{
var table_rows = document.querySelectorAll('tbody tr');
for (row of table_rows)
{
row.className = "";
}
}
function duplicate_check(event)
{
if (event.target.checked)
{
duplicate_hide();
}
else
{
duplicate_show();
}
}
.hidden {
display: none;
}
<div>
<input type="checkbox" onchange="duplicate_check(event)" /> Toggle Me
</div>
<table class="test-table">
<thead>
<tr role="row">
<th> Name </th>
<th> Test </th>
<th> Date </th>
<th> Score </th>
<th> something else </th>
</thead>
<tbody>
<tr class='odd'>
<td title="Name">John Doe</td>
<td title="Test">exam 1</td>
<td title="Date">03/08/2017</td>
<td title="Score">4</td>
</tr>
<tr class='even'>
<td title="Name">John Doe</td>
<td title="Test">exam 1</td>
<td title="Date">03/08/2017</td>
<td title="Score">5</td>
</tr>
<tr class='odd'>
<td title="Name">John Doe</td>
<td title="Test">exam 2</td>
<td title="Date">03/08/2017</td>
<td title="Score">7</td>
</tr>
<tr class='even'>
<td title="Name">Wendy Doe</td>
<td title="Test">exam 1</td>
<td title="Date">03/08/2017</td>
<td title="Score">7</td>
</tr>
<tr class='odd'>
<td title="Name">Wendy Doe</td>
<td title="Test">exam 1</td>
<td title="Date">02/11/2017</td>
<td title="Score">4</td>
</tr>
<tr class='even'>
<td title="Name">Wendy Doe</td>
<td title="Test">exam 1</td>
<td title="Date">02/11/2017</td>
<td title="Score">3</td>
</tr>
</tbody>
</table>

please see the demo.If you want add a checkbox to show the rest scores,this code doesn't helped you,and you must grouped the data via [name,test] before render.so you must provide multi table instead,not one table only.the strcture may be like this:
<table>
<thead>
<tr>
<th>Name</th>
<th>Test</th>
<th>Scores</th>
</tr>
</thead>
<tbody>
<tr>
<td title="Name">John Doe</td>
<td title="Test">Exam 1</td>
<td>
<table>
<thead>
<tr>
<th>Date</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>02/11/2017</td>
<td>8</td>
</tr>
<tr>
<td>02/11/2017</td>
<td>3</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/6.23.0/polyfill.min.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<table class="test-table">
<thead>
<tr role="row">
<th> Name</th>
<th> Test</th>
<th> Date</th>
<th> Score</th>
</thead>
<tbody>
<tr role="row">
<td title="Name">John Doe</td>
<td title="Test">Exam 1</td>
<td title="Date">02/11/2017</td>
<td title="Score">8</td>
</tr>
<tr role="row">
<td title="Name">John Doe</td>
<td title="Test">Exam 1</td>
<td title="Date">02/11/2017</td>
<td title="Score">3</td>
</tr>
<tr role="row">
<td title="Name">Jane Doe</td>
<td title="Test">Exam 1</td>
<td title="Date">02/11/2017</td>
<td title="Score">8</td>
</tr>
<tr role="row">
<td title="Name">Jane Doe</td>
<td title="Test">Exam 2</td>
<td title="Date">02/11/2017</td>
<td title="Score">8</td>
</tr>
</tbody>
</table>
<script type="text/babel">
let highest = {};
Array.from(document.querySelectorAll('table tbody tr')).forEach((exam) => {
const get = (name) => {
return exam.querySelector(`[title="${name}"]`).textContent;
};
var [name, test, score]=[get('Name'), get('Test'), parseInt(get('Score'))];
let key = [name, test];
if (highest[key] >= score) {
exam.parentNode.removeChild(exam);
return;
}
highest[key] = score;
});
</script>

You seem to be making it too complex. Just loop over the rows in the table body and collect name, test, score and the row it's in. If you encounter a combination more than once, hide the lower score or show the higher score and update the saved score and row.
var rows = document.querySelector('table').tBodies[0].rows;
var seen = {};
[].forEach.call(rows, row => {
var name = row.cells[0].textContent,
test = row.cells[1].textContent,
score = Number(row.cells[3].textContent);
if (seen[name] && seen[name].hasOwnProperty(test)){
if (seen[name][test].score > score) {
row.style.display = 'none';
} else {
seen[name][test].row.style.display = 'none';
seen[name][test] = {score: score, row: row};
}
} else {
seen[name] = {[test]:{score: score, row: row}};
}
})
<table class="test-table">
<thead>
<tr role="row">
<th> Name </th>
<th> Test </th>
<th> Date </th>
<th> Score </th>
</thead>
<tbody>
<tr role="row">
<td title="Name">John Doe</td>
<td title="Test">Exam 1</td>
<td title="Date">02/11/2017</td>
<td title="Score">8</td>
</tr>
<tr role="row">
<td title="Name">John Doe</td>
<td title="Test">Exam 1</td>
<td title="Date">02/11/2017</td>
<td title="Score">13</td>
</tr>
<tr role="row">
<td title="Name">John Doe</td>
<td title="Test">Exam 1</td>
<td title="Date">02/11/2017</td>
<td title="Score">3</td>
</tr>
<tr role="row">
<td title="Name">Jane Doe</td>
<td title="Test">Exam 1</td>
<td title="Date">02/11/2017</td>
<td title="Score">8</td>
</tr>
<tr role="row">
<td title="Name">Jane Doe</td>
<td title="Test">Exam 2</td>
<td title="Date">02/11/2017</td>
<td title="Score">8</td>
</tr>
</tbody>
</table>
In some recent browsers, NodeLists (such as HTMLCollections like rows and those returned by querySelectorAll) have a forEach method that makes it simpler.
This also uses computed property names, which can be avoided but takes a couple more lines of code. If they're not supported, likely nor are arrow functions. Neither are an issue and are easily replaced.

JQuery get cell value from row object

There is a table with few rows, one of row has .active class, each cell of row has each class, in JQuery selecting table row with .active class, how can i get cell with specific class value/text ('.html()')
var curentRow = $("#selectProduct tr.active);
//how can i get from curentRow value/text of cell with class .prod_name?
<table id="selectProduct" class="productTable">
<tr>
<td>Nr</td>
<td>ID</td>
<td>Product</td>
<td>Buy Price</td>
<td>Precent</td>
<td>Sell Price</td>
<td>Provider</td>
</tr>
<tr>
<td class="">1</td>
<td class="prod_id">1</td>
<td class="prod_name">Product 1</td>
<td class="buy_price">100</td>
<td class="plus_percent">10</td>
<td class="sell_price">110</td>
<td class="provider_name">provider 1</td>
</tr>
<tr class="active">
<td class="">2</td>
<td class="prod_id">2</td>
<td class="prod_name">Product 2</td>
<td class="buy_price">1000</td>
<td class="plus_percent">10</td>
<td class="sell_price">1100</td>
<td class="provider_name">provider 2</td>
</tr>
<tr>
<td class="">3</td>
<td class="prod_id">3</td>
<td class="prod_name">Product 3</td>
<td class="buy_price">50</td>
<td class="plus_percent">20</td>
<td class="sell_price">60</td>
<td class="provider_name">provider 3</td>
</tr>
</table>

Use function find() to find the cell that you need in the row:
var curentRow = $("#selectProduct tr.active");
var yourCell = curentRow.find('.prod_id');
var value = yourCell.text();

Resizable columns tables with fixed header

I'm trying to create a table with resizable columns and fixed header.
But when I'm trying to drag the header column, table columns change their size, but some gap is created.
For example:
What I get after dragging:
My sample:
<script>
$(document).ready(function(){
$('#tableHeader').colResizable({
liveDrag: true,
onDrag: resFun
});
function resFun() {
var c1 = $('#c1').width();
var c2 = $('#c2').width();
var c3 = $('#c3').width();
$('.c1').width(c1);
$('.c2').width(c2);
$('.c3').width(c3);
};
resFun();
});
</script>
<div style="padding-right: 17px; height: 39px;">
<table class="table table-bordered" id="tableHeader" style="width: 100%; height: 39px;">
<tr>
<th id="c1">first</th>
<th id="c2">second</th>
<th id="c3">third</th>
</tr>
</table>
</div>
<div style="overflow: auto; height: 200px;">
<table class="table table-bordered" id="table">
<tr>
<td class="c1">col 1</td>
<td class="c2">col 2</td>
<td class="c3">col 3</td>
</tr>
<tr>
<td class="c1">col 1</td>
<td class="c2">col 2</td>
<td class="c3">col 3</td>
</tr>
<tr>
<td class="c1">col 1</td>
<td class="c2">col 2</td>
<td class="c3">col 3</td>
</tr>
<tr>
<td class="c1">col 1</td>
<td class="c2">col 2</td>
<td class="c3">col 3</td>
</tr>
<tr>
<td class="c1">col 1</td>
<td class="c2">col 2</td>
<td class="c3">col 3</td>
</tr>
<tr>
<td class="c1">col 1</td>
<td class="c2">col 2</td>
<td class="c3">col 3</td>
</tr>
<tr>
<td class="c1">col 1</td>
<td class="c2">col 2</td>
<td class="c3">col 3</td>
</tr>
<tr>
<td class="c1">col 1</td>
<td class="c2">col 2</td>
<td class="c3">col 3</td>
</tr>
</table>
</div>

The problem is that the cells of the second table have a padding set and the cells of the header doesn't.. add padding to the header as well and should be ok

Turn HTML table into array with javascript

Hi I have the following table:
<tbody>
<tr class="odd first-child">
<td class="first-child account_name">Label 1</td>
<td class="last-child balance">Amount 1</td>
</tr>
<tr class="even">
<td class="first-child account_name">Label 2</td>
<td class="last-child balance">Amount 2</td>
</tr>
<tr class="odd">
<td class="first-child account_name">Label 3</td>
<td class="last-child balance">Amount 3</td>
</tr>
<tr class="even">
<td class="first-child account_name">Label 4</td>
<td class="last-child balance">Amount 4</td>
</tr>
<tr class="odd">
<td class="first-child account_name">Label 5</td>
<td class="last-child balance">Amount 5</td>
</tr>
</tbody>
I need to turn it into an array using javascript, so that "Label 1" is the key for value "Amount 1," "Label 2" is the key for value "Amount 2," etc.
How might I go about this?
Thanks!

All you need to do is simply loop over the nodes.
var c = document.querySelectorAll('#tgt td');
var d = {};
for (var i = 0; i < c.length; i += 2) {
d[c[i].innerHTML] = c[i + 1].innerHTML;
}
console.log(d);
<table id="tgt">
<tbody>
<tr class="odd first-child">
<td class="first-child account_name">Label 1</td>
<td class="last-child balance">Amount 1</td>
</tr>
<tr class="even">
<td class="first-child account_name">Label 2</td>
<td class="last-child balance">Amount 2</td>
</tr>
<tr class="odd">
<td class="first-child account_name">Label 3</td>
<td class="last-child balance">Amount 3</td>
</tr>
<tr class="even">
<td class="first-child account_name">Label 4</td>
<td class="last-child balance">Amount 4</td>
</tr>
<tr class="odd">
<td class="first-child account_name">Label 5</td>
<td class="last-child balance">Amount 5</td>
</tr>
</tbody>
</table>

You could try simulate key/value pairs using following javascript:
var trElements = document.getElementsByTagName('tr');
var keyValue = [];
for(var i = 0; i < trElements.length; i++)
{
var tdElements = trElements[i].getElementsByTagName('td');
keyValue.push({"key":tdElements[0].innerHTML,"value":tdElements[1].innerHTML});
}
With following html:
<body>
<table>
<tr>
<td>Key1</td>
<td>Value1</td>
</tr>
<tr>
<td>Key2</td>
<td>Value2</td>
</tr>
</table>
</body>
That way you can get the value of your key or value by either choosing keyValue[i].key or keyValue[i].value. I think it's the simplest way. I don't think js supports key-value pairs by default.