In simple form my html table is such:
Article | description | links | price
<table>
<tr>
<td>
</td>
OC 90
<td>
ololooo
</td>
<td>
</td>
<td>
123
</td>
</tr>
<tr>
<td>
OC90
</td>
<td>
some other ololo
</td>
<td>
link
</td>
<td>
123
</td>
</tr>
<tr>
<td>
OC 90
</td>
<td>
other other oloooloo
</td>
<td>
</td>
<td>
321
</td>
</tr>
</table>
But how can i do, that i delete from my table duplicates, but!!! only if first column (also make it uppercase and delete freespaces when check) and last td (so article and price are same), but main trouble is to left in table such row, which in third column has link's...
After that my table must look:
<table>
<tr>
<td>
OC90
</td>
<td>
some other ololo
</td>
<td>
link
</td>
<td>
123
</td>
</tr>
<tr>
<td>
OC 90
</td>
<td>
other other oloooloo
</td>
<td>
</td>
<td>
321
</td>
</tr>
</table>
I have tried something like this:
var seen = {};
$('table tr').each(function() {
var tr = $(this).clone();
if(tr.not(':input')){ //tried for input, is not strange)
tr.find("td:eq(2)").remove();
tr.find("td:eq(3)").remove();
// tr.find("td:eq(2)").remove();
var txt = tr.text().toLowerCase().replace(/\s+/g, '');;
if (seen[txt])
$(this).remove();
else
seen[txt] = true;
}
}
});
but this doesn't help's me....
also full-version table is here:
http://jsfiddle.net/STrm5/1/
Please help me to delete duplicates from table....
Try with this :
var seen = {};
$('#table tr').each(function () {
var tr = $(this).clone();
if (tr.not(':input')) {
tr.find("td:eq(1)").remove();
tr.find("td:eq(1)").remove();
var txt = tr.text().toLowerCase().replace(/\s+/g, '');
if (seen[txt]) $(this).remove();
else seen[txt] = true;
}
});
Sample
Related
The only consideration for this question is, at the moment, I'm not using jQuery. Here's the code:
//I think here is where the problem relies, in the function I'm using to calculate the sum of the values under 'Valor' column:
var t1 = document.getElementById("emp-table");
getSum();
function getSum() {
var sumVal = 0;
for(var i = 1; i < t1.rows.length; i++){
sumVal = sumVal + parseInt(t1.rows[i].cells[6].innerHTML);
document.getElementById("sumV").innerHTML = "Sum Value = "+sumVal;
}
};
function getUniqueValuesFromColumn() {
var unique_col_values_dict = {}
allFilters = document.querySelectorAll(".table-filter")
allFilters.forEach((filter_i) => {
col_index = filter_i.parentElement.getAttribute("col-index");
const rows = document.querySelectorAll("#emp-table > tbody > tr")
rows.forEach((row) => {
cell_value = row.querySelector("td:nth-child("+col_index+")").innerHTML;
if (col_index in unique_col_values_dict) {
if (unique_col_values_dict[col_index].includes(cell_value)) {
//console.log("already exists");
} else {
unique_col_values_dict[col_index].push(cell_value)
}
} else {
unique_col_values_dict[col_index] = new Array(cell_value)
}
});
});
updateSelectOptions(unique_col_values_dict)
};
function updateSelectOptions(unique_col_values_dict) {
allFilters = document.querySelectorAll(".table-filter")
allFilters.forEach((filter_i) => {
col_index = filter_i.parentElement.getAttribute('col-index')
unique_col_values_dict[col_index].forEach((i) => {
filter_i.innerHTML = filter_i.innerHTML + `\n<option value="${i}">${i}</option>`
});
});
};
function filter_rows() {
allFilters = document.querySelectorAll(".table-filter")
var filter_value_dict = {}
allFilters.forEach((filter_i) => {
col_index = filter_i.parentElement.getAttribute('col-index')
value = filter_i.value
if (value != "all") {
filter_value_dict[col_index] = value;
}
});
var col_cell_value_dict = {};
const rows = document.querySelectorAll("#emp-table tbody tr");
rows.forEach((row) => {
var display_row = true;
allFilters.forEach((filter_i) => {
col_index = filter_i.parentElement.getAttribute('col-index')
col_cell_value_dict[col_index] = row.querySelector("td:nth-child(" + col_index+ ")").innerHTML
})
for (var col_i in filter_value_dict) {
filter_value = filter_value_dict[col_i]
row_cell_value = col_cell_value_dict[col_i]
if (row_cell_value.indexOf(filter_value) == -1 && filter_value != "all") {
display_row = false;
break;
}
}
if (display_row == true) {
row.style.display = "table-row"
} else {
row.style.display = "none"
}
})
};
//And finally, the 'onload' part to update the content:
window.onload = () => {
console.log(document.querySelector("#emp-table > tbody > tr:nth-child(1) > td:nth-child(2) ").innerHTML);
};
getUniqueValuesFromColumn()
<body>
<div class="container">
<div class="card">
<div class="card-header">
Lista Pagos
</div>
<div class="card-body">
<table id="emp-table" class="table">
<thead>
<tr>
<th>id</th>
<th col-index = 2>Persona
<select class="table-filter" onchange="filter_rows()">
<option value="all"></option>
</select>
</th>
<th col-index = 3>Servicio
<select class="table-filter" onchange="filter_rows()">
<option value="all"></option>
</select>
</th>
<th col-index = 4>Año
<select class="table-filter" onchange="filter_rows()">
<option value="all"></option>
</select>
</th>
<th col-index = 5>Mes
<select class="table-filter" onchange="filter_rows()">
<option value="all"></option>
</select>
</th>
<th>id Recibo</th>
<th>Valor</th>
</tr>
</thead>
<tbody>
<tr>
<td> 33 </td>
<td> David Camacho </td>
<td> Gas </td>
<td> 2022 </td>
<td> 4 </td>
<td> 7 </td>
<td> 10000 </td>
</tr>
<tr>
<td> 32 </td>
<td> Héctor Camacho </td>
<td> Gas </td>
<td> 2022 </td>
<td> 4 </td>
<td> 7 </td>
<td> 15075 </td>
</tr>
<tr>
<td> 30 </td>
<td> Héctor Camacho </td>
<td> Seguro exequial </td>
<td> 2022 </td>
<td> 4 </td>
<td> 6 </td>
<td> 11100 </td>
</tr>
<tr>
<td> 29 </td>
<td> María Camacho </td>
<td> Seguro exequial </td>
<td> 2022 </td>
<td> 4 </td>
<td> 6 </td>
<td> 11100 </td>
</tr>
<tr>
<td> 28 </td>
<td> Mateo León </td>
<td> Internet </td>
<td> 2022 </td>
<td> 4 </td>
<td> 1 </td>
<td> 20000 </td>
</tr>
<tr>
<td> 27 </td>
<td> David Camacho </td>
<td> Internet </td>
<td> 2022 </td>
<td> 4 </td>
<td> 1 </td>
<td> 11600 </td>
</tr>
<tr>
<td> 24 </td>
<td> Alba Camacho </td>
<td> Internet </td>
<td> 2022 </td>
<td> 4 </td>
<td> 1 </td>
<td> 11600 </td>
</tr>
<tr>
<td> 23 </td>
<td> María Camacho </td>
<td> Internet </td>
<td> 2022 </td>
<td> 4 </td>
<td> 1 </td>
<td> 11600 </td>
</tr>
</tbody>
</table>
</div>
</div>
<p id="sumV"></p>
<br/>
<br/>
</div>
</body>
So, at the moment, whenever I load the page, the <span> tag already has the total amount if we consider all rows. But, whenever I filter the table, the value there doesn't change. At first, I tried to do it with a button using onclick, but every time I clicked it, it changed from the total value to 'undefined'. That's why I removed that button, and I'm considering to update the content in the <span> tag with the onload segment of my code, but I've been unable to achieve it so far.
Any help is greatly appreciated, cheers!
You could replace your getSum function with the following
function getSum() {
const rows = [...document.querySelectorAll('#emp-table tr').values()];
const visibleRows = rows.filter(row => {
return row.style.display !== 'none';
});
let sumVal = 0;
for (let visibleRow of visibleRows){
sumVal += parseInt(visibleRow.cells[6].innerHTML);
}
document.getElementById("sumV").innerHTML = "Sum Value = " + sumVal;
};
Basically you first filter the rows based on their display value to get just the visibleRows and then sum up the values.
I have a table with four columns and two rows, as follows:
<table>
<tr>
<td> A </td>
<td> B </td>
<td> C </td>
<td> D </td>
</tr>
<tr>
<td> E </td>
<td> F </td>
<td> G </td>
<td> H </td>
</tr>
</table>
Using a media query, such as #media (max-width: 800px), I want to restructure this table to instead have two columns and four rows, e.g:
<table>
<tr>
<td> A </td>
<td> B </td>
</tr>
<tr>
<td> C </td>
<td> D </td>
</tr>
<tr>
<td> E </td>
<td> F </td>
</tr>
<tr>
<td> G </td>
<td> H </td>
</tr>
</table>
Is this possible? Solutions in JavaScript are also welcome if, which I assume to be the case, this cannot be done with mere CSS.
Pure CSS
Changing the appearance using floats and nth-child.
td { float:left; display:inline-block; }
td:nth-child(3) {
clear:both;
}
https://jsfiddle.net/hks5d6th/2/
JavaScript
Looping through all applicable columns and use the modulus operator to determine where to split out into new rows.
var table = document.getElementsByTagName('table')[0],
columns = Array.prototype.slice.call(document.getElementsByTagName('td')),
newTable = document.createElement('table'), html;
columns.forEach(function(next, idx) {
if (idx % 2 === 0 || idx === 0) {
html += '<tr>' + next.outerHTML;
return;
}
html += next.outerHTML + '</tr>';
});
newTable.innerHTML = html;
table.replaceWith(newTable);
https://jsfiddle.net/hks5d6th/1/
This is what i have right now:
This is the table:
<table border='1'>
<tr>
<td>
Employee Code
</td>
<td>
FirstName
</td>
<td>
LastName
</td>
<td>
Address
</td>
</tr>
<tr class='display' onclick='hello();' >
<td id='trId1'>
E100
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
<tr class='display' onclick='hello();' >
<td id='trId1'>
E200
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
-----> etc...
</table>
This is the javascipt
<script>
function hello(){
var r = document.getElementById("trId1").innerHTML;
alert(r);
}
</script>
The JavaScript gets E100 when its the first row is clicked which is correct but when E200 row is clicked it still shows E100, how would i get E200 and so on when there is more data? Is there a javascript only solution
To start, you can't have two Id's on the page that are the same as that is invalid HTML5 and will cause errors in some browsers. The reason why you're getting what you're getting is because when looking for an ID, most browsers only look for one occurrence of an ID (because that is precisely what valid HTML is, 1 unique id per page). So to fix up your HTML code and you may also want to have a header for your table:
<table border='1'>
<thead>
<tr>
<th>
Employee Code
</th>
<th>
FirstName
</th>
<th>
LastName
</th>
<th>
Address
</th>
</tr>
</thead>
<tbody>
<tr class='display' onclick='hello(1);' >
<td class='trId1'>
E100
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
<tr class='display' onclick='hello(2);' >
<td class='trId1'>
E200
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
-----> etc...
</tbody>
</table>
Your best bet is to getElementsByClassName function and traverse the array to the one you want. (general change, code) Assuming you can't use JQuery at all for some reason:
<script>
function hello(rowClickedNumber){
var RowClicked = document.getElementsByClassName("trId1");
var r = RowClicked[0].innerHTML;
alert(r); //E100
var r = RowClicked[1].innerHTML;
alert(r); //E200
var r = RowClicked[rowClickedNumber].innerHTML;
alert(r);
}
</script>
However, an even simpler solution would be to use JQuery and would limit browser inconsistencies. After the document loads:
$(body).on("click", "tr", function(){
var getData =$(this).children(".trId1").getHTML();
console.log(getData);
});
Note: this is to allow when you inevitably add more items to the table (hence the reason why the code to get a child element of a row).
*EDIT: added the note
**EDIT: fixed the spelling and grammer
* EDIT: fixed the javascript function.
I have a solution for this. Please check the code and fiddle link below. Let me know if you have any question.
Fiddle
HTML:
<table border='1'>
<tr>
<td>
Employee Code
</td>
<td>
FirstName
</td>
<td>
LastName
</td>
<td>
Address
</td>
</tr>
<tr class='display' onclick='hello(this);' >
<td class='trId1'>
E100
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
<tr class='display' onclick='hello(this);' >
<td class='trId1'>
E200
</td>
<td>
Alex
</td>
<td>
Stone
</td>
<td>
33 Wave Place
</td>
</tr>
</table>
JavaScript:
function hello(obj){
alert(obj.childNodes[1].innerText); //The first child being a text node.
}
I have a table
<table id="t">
<tr>
<td> fsabcdf </td>
<td> xyzabcdf </td>
</tr>
<tr>
<td> fsabcdf </td>
<td> xyzabcdf </td>
</tr>
<tr>
<td> fsabcdf </td>
<td> xyzabcdf </td>
</tr>
</table>
i want to replace "abc"(in td) with "abc" as in the following
<table id="t">
<tr>
<td> fs<span class='c2'>abc</span>df </td>
<td> xyz<span class='c2'>abc</span>df </td>
</tr>
<tr>
<td> fs<span class='c2'>abc</span>df </td>
<td> xyz<span class='c2'>abc</span>df </td>
</tr>
<tr>
<td> fs<span class='c2'>abc</span>df </td>
<td> xyz<span class='c2'>abc</span>df </td>
</tr>
</table>
i googled for the solution but didn't find any.
Thanks in advance.
You can do:
$('td').html(function(i, html){
return html.replace(/abc/g, '<span class="c2">abc</span>');
});
This goes through each <td>, looks at its text, then replaces every occurrence of abc with abc wrapped in the span you want.
Something like:
$('td').each(function () {
$(this).html($(this).html().replace('abc', '<span class="c2">abc</span>'));
});
http://jsfiddle.net/Ru8XX/
Try this:
$('#t td').each(function(){
$(this).html( $(this).html().replace("abc","<span class='c2'>abc</span>") );
});
**HTML Snippet**
<table id="mytable">
#foreach (var item in Model) {
<tr class="item">
<td>
#Html.DisplayFor(modelItem => item.OrderId)
</td>
<td>
#Html.DisplayFor(modelItem => item.CustomerId)
</td>
<td>
#Html.DisplayFor(modelItem => item.OrderDate)
</td>
<td>
#Html.DisplayFor(modelItem => item.OrderQty)
</td>
<td class="Weight">
#Html.DisplayFor(ModelItem => item.TotalWeight, new { id="TotalWeight"})
</td>
<td>
#Html.DisplayFor(modelItem => item.LimeType.LimeTypeName)
</td>
</tr>
</table>
<script type="text/javascript">
$(document).ready(function () {
$("tr.item").each(function () {
var weight = $(this).find(td[5].val());
var unit = "Kg";
var value = weight + unit;
$("#TotalWeight").val(value);
});
});
</script>
}
html as in markup
<tbody>
<tr>
<tr class="item">
<td> 1 </td>
<td> C001 </td>
<td> 7/26/2013 12:00:00 AM </td>
<td> 100.00 </td>
<td class="Weight"> 5000.00 </td>
<td> Hydrated Lime Powder </td>
<td> Order Pending </td>
<td>
</tr>
</tbody>
I want to add Kg to my TotalWeight value. My code is not working. It shows the value in
Quantity1 as undefined. How can one access the table in jQuery?
i forgot to define weight, but still the code is not working, i have posted the html markup
$(document).ready(function () {
$("tr.item").each(function () {
var weight = $(this).find('td.Weight').text(); // you left out the quotes and the closing paran
var unit = "Kg";
$("#TotalWeight").text(weight + unit);
});
});
jsFiddle DEMO
You should probably actually calculate the sum in Scala (it looks you're using Scala) instead. Also your loop closes the <table> tag after every model and your <tr> tag is never closed. You also have one ModelItem that should probably be modelItem like in other places.