when use JQuery clone() , why remove() not working [duplicate] - javascript

This question already has answers here:
.clone() and .remove() method in jquery
(2 answers)
Closed 1 year ago.
I use jquery clone() to copy table element , and I want to remove first td
there is my code , can any one help?
javascript
$.fn.hasAttr = function(name) {
return this.attr(name) !== undefined;
};
var arr_tr=new Array();
$('table tr').each(function(i){
arr_tr[i].push($(this).clone());
});
//for some reason I need use like below
for(var x in arr_tr){
for(var y in arr_tr[x]){
if(arr_tr[x][y].find('td:eq(0)').hasAttr('rowspan')){//if td has rowspan attribute
arr_tr[x][y].find('td:eq(0)').remove();//<== Why [<td rowspan=3>ABC</td>] can't remove
};
}
}
HTML
<table border=1 width='100%'>
<tr><td rowspan=3>ABC</td><td>A2</td><td>A3</td></tr>
<tr><td>B2</td><td>B3</td></tr>
<tr><td>C2</td><td>C3</td></tr>
</table>

You can simplify this down to just using an attribute selector:
const $clone = $('table').clone();
$clone.find('td:first-child[rowspan]').remove();
$('#res').append($clone)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border=1 width='100%'>
<tr>
<td rowspan=3>ABC</td>
<td>A2</td>
<td>A3</td>
</tr>
<tr>
<td>B2</td>
<td>B3</td>
</tr>
<tr>
<td>C2</td>
<td>C3</td>
</tr>
<tr>
<td rowspan=2>CDE</td>
<td>C4</td>
<td>C5</td>
</tr>
<tr>
<td>C6</td>
<td>C7</td>
</tr>
</table>
<h3>Result</h3>
<div id="res"></div>

Related

Delete tabel row with pure javascript

I Need to delete a table row with pure javascript. The table has only a class name, no id.
Here is a fiddle with my first try:
var table = document.getElementsByClassName('table');
while(table.rows.length > 0) {
table.deleteRow(1);
}
https://jsfiddle.net/5s0w6cwL/
Thanks for any advice.
You have to get first element.
var table = document.getElementsByClassName('table')[0];
because document.getElementsByClassName method returns a NodeList.
var table = document.getElementsByClassName('table')[0];
table.deleteRow(1);
<table class="table" border="1">
<tbody>
<tr>
<td> </td>
</tr>
<tr>
<td>delete me</td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>

Get a value out of element with same variable class [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
Posted a similar question, but may be this case will make more sense. Got a table with many first td's of tr having a duplicate first td in a different tr. I'm using these for identification. I want to pull a value from 2nd tr and insert it into already appended(!) td in the first tr. Here is a quick html code example
<div class="tableclass">
<table>
<tbody>
<tr>
<td>id1</td>
<td>something else</td>
<td>1</td>
</tr>
<tr>
<td>id2</td>
<td>something else</td>
<td>2</td>
</tr>
<tr>
<td>id2</td>
<td>something else</td>
<td>3</td>
</tr>
<tr>
<td>id3</td>
<td>something else</td>
<td>4</td>
</tr>
<tr>
<td>id1</td>
<td>something else</td>
<td>5</td>
</tr>
<tbody>
</table>
<div>
And here is my jquery code
$(".tableclass table tbody tr").each(function(){
$(this).append('<td class="fbctr"></td>');
var trclass = $(this).find("td:first-child").html();
$(this).addClass(trclass);
// this is where I'm having a problem
var fbctr = $(this).parent().filter(trclass).eq(2).find("td:nth-child(3)");
$(this).find(".fbctr").html(fbctr);
});
OK, your problem is that jquery .filter() works on a set of given DOM elements. So you have to first select <tr> elements and then use .filter(). In your question you are applying it on your <table>
So, Your JavaScript code will be like this:
$(".tableclass table tbody tr").each(function(){
var trclass = $(this).find("td:first-child").html();
$(this).addClass(trclass);
var fbctr = $(this).parent().find('tr').filter('.'+trclass).eq(1).find("td:nth-child(3)").html();
if(typeof fbctr !== "undefined"){
console.log(fbctr);
$(this).find(".fbctr").html(fbctr);
}
});
Update(Corrected Code):
In case you want to copy the value of first occurring element into the second occurring element, use this code:
$(".tableclass table tbody tr").each(function(){
var trclass = $(this).find("td:first-child").html();
$(this).addClass(trclass);
var elements = $(this).parent().find('tr').filter('.'+trclass);
if(elements.length > 1){
var fbctr = elements.eq(0).find("td:nth-child(3)").html();
if(typeof fbctr !== "undefined")
$(this).find(".fbctr").html(fbctr);
}
});
And in case you want to copy the value of second occurring element into the first occurring element, use this code:
$(".tableclass table tbody tr").each(function(){
var trclass = $(this).find("td:first-child").html();
$(this).addClass(trclass);
var elements = $(this).parent().find('tr').filter('.'+trclass);
var fbctr = elements.eq(1).find("td:nth-child(3)").html();
if(typeof fbctr !== "undefined")
$('.'+trclass).not(this).find(".fbctr").html(fbctr);
});
You can filter out the duplicate rows first and remove all the duplicate rows but not first, then in the first rows append the 3rd td element of the last duplicate row.
In the below solution i am also removing the duplicate rows, you can keep/remove that based on your requirement.
Here is the working solution where i have added few extra node for testing of the solution.
var rows = $(".tableclass table tbody tr")
rows.each(function() {
var trclass = $(this).find("td:first-child").html();
$(this).addClass(trclass);
var dupeRows = rows.filter("." + trclass);
rows.filter("." + trclass).not(":first").remove();
if (dupeRows.length > 1) {
rows.filter("." + trclass).first().append('<td>' + $(dupeRows[dupeRows.length - 1]).find("td:nth-child(3)").html() + '</td>');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tableclass">
<table>
<tbody>
<tr>
<td>id1</td>
<td>something else</td>
<td>1</td>
</tr>
<tr>
<td>id2</td>
<td>something else</td>
<td>2</td>
</tr>
<tr>
<td>id2</td>
<td>something else</td>
<td>3</td>
</tr>
<tr>
<td>id3</td>
<td>something else</td>
<td>4</td>
</tr>
<tr>
<td>id1</td>
<td>something else</td>
<td>5</td>
</tr>
<tr>
<td>id2</td>
<td>something else</td>
<td>5</td>
</tr>
<tr>
<td>id2</td>
<td>something else</td>
<td>8</td>
</tr>
<tbody>
</table>
<div>
;

For each element in class, console.log its value

For each element with the class the_name, I want to alert the value inside that element. So for the code below, it should alert three times. Once each for: "apples", "pears", and "plums".
Not sure what I am missing here.
var arr = $('.the_name');
for(var i = 0; i < arr.length; i++){
alert(arr[i].val());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table id="datatable">
<thead>
<tr>
<th></th>
<th>Fruits</th>
</tr>
</thead>
<tbody>
<tr>
<td class="the_name">Apples</td>
<td class="the_count">3</td>
</tr>
<tr>
<td class="the_name">Pears</td>
<td class="the_count">2</td>
</tr>
<tr>
<td class="the_name">Plums</td>
<td class="the_count">5</td>
</tr>
<tr>
<td>Bananas</td>
<td>1</td>
</tr>
<tr>
<td>Oranges</td>
<td>2</td>
</tr>
</tbody>
</table>
By accessing the jQuery object by index you're retrieving the underlying DOMElement, not the jQuery object, and they do not have a val() method. Also note that you seems to be looking to retrieve the text of the element, not the value. As such, you should use each() to loop over the selected elements, using this to refer to the element of the current iteration. Try this:
$('.the_name').each(function() {
alert($(this).text());
});
Also note that for debugging purposes, console.log() should be used instead of alert().
$('.the_name').each(function() {
alert($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table id="datatable">
<thead>
<tr>
<th></th>
<th>Fruits</th>
</tr>
</thead>
<tbody>
<tr>
<td class="the_name">Apples</td>
<td class="the_count">3</td>
</tr>
<tr>
<td class="the_name">Pears</td>
<td class="the_count">2</td>
</tr>
<tr>
<td class="the_name">Plums</td>
<td class="the_count">5</td>
</tr>
<tr>
<td>Bananas</td>
<td>1</td>
</tr>
<tr>
<td>Oranges</td>
<td>2</td>
</tr>
</tbody>
</table>
you need to use .text() instead of .val().
.val() works on input elements (or any element with a value attribute?) and .text() will not work on input elements. .val() gets the value of the input element -- regardless of type. .text() gets the innerText (not HTML) of all the matched elements:
.text()
The result is a string that contains
the combined text contents of all
matched elements. This method works on
both HTML and XML documents. Cannot be
used on input elements. For input
field text use the val attribute.
.val()
Get the content of the value attribute
of the first matched element
you need to use use $ to use jquery method .text().
var arr = $('.the_name');
for(var i = 0; i < arr.length; i++){
alert($(arr[i]).text());
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table id="datatable">
<thead>
<tr>
<th></th>
<th>Fruits</th>
</tr>
</thead>
<tbody>
<tr>
<td class="the_name">Apples</td>
<td class="the_count">3</td>
</tr>
<tr>
<td class="the_name">Pears</td>
<td class="the_count">2</td>
</tr>
<tr>
<td class="the_name">Plums</td>
<td class="the_count">5</td>
</tr>
<tr>
<td>Bananas</td>
<td>1</td>
</tr>
<tr>
<td>Oranges</td>
<td>2</td>
</tr>
</tbody>
</table>
The indexed values of a jQuery object are HTML elements, not jQuery objects.
You have to wrap them in a jQuery object before you can call jQuery methods on them:
var arr = $('.the_name');
for(var i = 0; i < arr.length; i++){
var html_element = arr[i];
var $html_element = $(html_element);
alert($html_element.val());
}

Adding the numbers in table row using jquery [duplicate]

This question already has answers here:
How to turn NaN from parseInt into 0 for an empty string?
(18 answers)
Closed 7 years ago.
I want to add the numbers in the table cell without getting NaN.
<table id="sample" border="1">
<tr>
<td>1</td>
<td>2</td>
<td>1</td>
<td></td>
<td>1</td>
<td>3</td>
</tr>
<tr>
<td></td>
</tr>
</table>
Fiddle:
How it is possible?
Check this
$(document).ready(function() {
var colTotal=0;
var col=$("#sample tr td");
col.each(function() {
colData=parseInt($(this).text(), 10);
if (colData) {
colTotal+=parseInt(colData);
}
});
$('#sample tr:last td').text(colTotal);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="sample" border="1">
<tr>
<td>1</td>
<td>2</td>
<td>1</td>
<td></td>
<td>1</td>
<td>3</td>
</tr>
<tr>
<td></td>
</tr>
</table>
use isNaN() function like:
$(document).ready(function() {
var colTotal=0;
var col=$("#sample tr td");
$(col).each(function()
{
colData=$(this).text();
colTotal+=isNaN(parseInt(colData)) ? 0: parseInt(colData);
});
$('#sample tr:last td').text(isNaN(colTotal) ? 0: colTotal);
});
DEMO
use $.isNumeric(colData)
updated your link
Just skip the blank values
$(document).ready(function() {
var colTotal=0;
$("#sample td").each(function()
{
if ($(this).text())
colTotal+=parseInt($(this).text());
});
$('#sample tr:last td').text(colTotal);
});

How can I get all <tr>-s from a <tbody> and convert it to String?

I have a HTML Table:
<table id="persons" border="1">
<thead id="theadID">
<tr>
<th>Name</th>
<th>sex</th>
<th>Message</th>
</tr>
</thead>
<tbody id="tbodyID">
<tr>
<td>Viktor</td>
<td>Male</td>
<td>etc</td>
</tr>
<tr>
<td>Melissa</td>
<td>Female</td>
<td>etc</td>
</tr>
<tr>
<td>Joe</td>
<td>Male</td>
<td>etc</td>
</tr>
</tbody>
</table>
<input type="button" onclick="getTbodyString();" value="get it"/>
I want some jquery/javascript, which can get the inside of the tbody by String. Like:
function getTbodyString() {
var tbodyString = $(.......).text(); //or val()?
alert("the body - "+tbodyString);
}
The result in the alert window should be this:
the body - <tr><td>Viktor</td><td>Male</td><td>etc</td></tr><tr><td>Melissa</td><td>Female</td><td>etc</td></tr><tr><td>Joe</td><td>Male</td><td>etc</td></tr>
Could anyone help me?
You need to html() instead of text(). The function text will not return you tags but returns plain text within tags.
var tbodyString = $('#tbodyID').html();
I would use native javascript function here that would be faster then jquery.
var tbodyString = document.getElementById('tbodyID').innerHTML; 
Just Replace your function code as below :
function getTbodyString() {
var tbodyString = $('#tbodyID').html();
alert("the body - "+tbodyString);
}

Categories