How to add a new element with jQuery - javascript

I would like to add a new element with jQuery with DOM-manipulation but I'm a little bit confused with all the functions like eq, nth and so on.
Here is my base construct:
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
Here should be the DOM-Manipulation
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
Where the "Here should be the DOM-Manipulation" I would like to insert a new tablerow.

Use this:
$(".tableInput").eq(3).find('tr').append('<tr><td>Hello World..!</td></tr>');
.tableInput{border:1px solid;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
:eq() allows you to access the elements in the jQuery object by index
http://api.jquery.com/eq-selector/
:nth-child also allows you to access the an element by index, however it only applies to the term to the immediate left of it.
http://api.jquery.com/nth-child-selector/

You need to use .after
$(document).ready(function(){
$tr = '<tr><td>Hello</td></tr>';
$('#myTable tr:first').after($tr);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput">
<tr>
<td></td>
</tr>
</table>
<table class="tableInput" id="myTable">
<tr>
<td></td>
</tr>
</table>

You can add table row with following ways :
1. Via append :
a. Without declaring element before :
$("#tableInput").last().append('<tr><td></td></tr>');
b. With declaring element :
var tableRow = $('<tr><td></td></tr>');
$("#tableInput").last().append(tableRow);
Via after :
var tableRow = $('<tr><td></td></tr>');$("#tableInput").last().children().after(tableRow);

Just append a new table row to the last <table> element like this
$('table:last').prev().append('<tr><td>Here is your new table row</td></tr>')
table{
border:1px solid;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tableInput">
<tr>
<td>A</td>
</tr>
</table>
<table class="tableInput">
<tr>
<td>B</td>
</tr>
</table>
<table class="tableInput">
<tr>
<td>C</td>
</tr>
</table>
<table class="tableInput">
<tr>
<td>D</td>
</tr>
<!--Here should be the DOM-Manipulation !-->
</table>
<table class="tableInput">
<tr>
<td>E</td>
</tr>
</table>
:eq() allows you to access the elements in the jQuery object by index
http://api.jquery.com/eq-selector/
:nth-child also allows you to access the an element by index, however it only applies to the term to the immediate left of it.
http://api.jquery.com/nth-child-selector/

Related

Table td color is not changing

I am trying to change color where first td contain Test1 word in here able to change color. But When I put test1 on coding here not changing color. Is there any way whether contain word in small or capital?
$("#X td:contains('Test1')").parents('tr').find("td:first").css("background-color", "red");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="X">
<tr>
<td>Test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>
You can use filter with regex.
// $("#X td:contains('/test1/i')").parents('tr').find("td:first").css("background-color", "red");
const matchTEST = /test/i;
$('#X td').filter((i, e) => matchTEST.test(e.innerText)).parent('tr').find("td:first").css("background-color", "red");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id = "X">
<tr >
<td>matchTEST</td>
<td>Test2</td>
<td>Test3</td>
</tr>
<tr >
<td>a</td>
<td>a</td>
<td>a</td>
</tr>
<tr >
<td>matchTEST</td>
<td>c</td>
<td>c</td>
</tr>
</table>
you can override jQuery contain to make it Case-Insensitive :
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
$("#X td:contains('Test3')")
.parents('tr')
.find("td:first")
.css("background-color", "red");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="X">
<tr> <td>test1</td> <td>test2</td> <td>test3</td> </tr>
<tr> <td></td> <td></td> <td></td> </tr>
<tr> <td>a</td> <td>b</td> <td>c</td> </tr>
</table>
You can use this selector combine :contains and :first
$("#X td:contains(Test1):first, #X td:contains(test1):first").css('color','red');
$("#X td:contains(Test1):first, #X td:contains(test1):first").css('color','red');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id = "X">
<tr >
<td>test1</td>
<td>Test2</td>
<td>Test3</td>
</tr>
<tr >
<td></td>
<td></td>
<td></td>
</tr>
<tr >
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>
`
You can filter the elements with a javascript function that uses a case-insensitive regex
var re = /test1/i;
$("#X td")
.filter((i, el) => re.test(el.innerHTML))
//.parents('tr').find("td:first")
.css("background-color", "red");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="X">
<tr>
<td>nope</td>
<td>test1</td>
<td>Test1</td>
<td>test2</td>
<td>protest1</td>
</tr>
</table>

Getting value from another column when clicking targeted column JQuery

When the user clicks on the 'Number' column I want to be able to get the 'Name' column value in the same row. So for example if I clicked on '999' I would want to be able to get David.
$('#table').on('click', 'td:nth-child(2)', function()
{
row = $(this).text();
alert(row);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border id='table'>
<thead>
<td>Name</td>
<td>Number</td>
<td>Address</td>
</thead>
<tbody>
<tr>
<td>David</td>
<td>999</td>
<td>Street 1</td>
</tr>
<tr>
<td>Bob</td>
<td>555</td>
<td>Street 3</td>
</tr>
<tr>
<td>Jessica</td>
<td>068</td>
<td>Street 5</td>
</tr>
</tbody>
</table>
You can use $(this).closest('tr').find('td:first').text() to get the closest first td and its text.
If the wanted item is inside of the tr but you dont know the place or you want it dynamically, you can add a class or id to the name td and change the code to this $(this).closest('tr').find('#WantedRowId').text()
$('#table').on('click', 'td:nth-child(2)', function() {
alert($(this).closest('tr').find('td:first').text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border id='table'>
<thead>
<td>Name</td>
<td>Number</td>
<td>Address</td>
</thead>
<tbody>
<tr>
<td>David</td>
<td>999</td>
<td>Street 1</td>
</tr>
<tr>
<td>Bob</td>
<td>555</td>
<td>Street 3</td>
</tr>
<tr>
<td>Jessica</td>
<td>068</td>
<td>Street 5</td>
</tr>
</tbody>
</table>
You can find below a more appropriate solution that dynamically checks what is the "Name" column index and retrieves accordingly.
As such, if you insert other columns, like ID and what not, it'll still work without updating this specific logic.
$('#table').on('click', 'td:nth-child(2)', function()
{
$td = $(this);
indexCol = $td.closest('table').find('td:contains(Name)').index()
alert( $td.closest('tr').find('td').eq(indexCol).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border id='table'>
<thead>
<td>Name</td>
<td>Number</td>
<td>Address</td>
</thead>
<tbody>
<tr>
<td>David</td>
<td>999</td>
<td>Street 1</td>
</tr>
<tr>
<td>Bob</td>
<td>555</td>
<td>Street 3</td>
</tr>
<tr>
<td>Jessica</td>
<td>068</td>
<td>Street 5</td>
</tr>
</tbody>
</table>

two column html table with group

I expect next to name column is besides iphone, why my table doesn't work as expected?
<table>
<tbody>
<tr>
<td>
<tr>
<td>Name:</td>
<td>iphone</td>
</tr>
<tr>
<td>Price:</td>
<td>123</td>
</tr>
<tr>
<td>Qty</td>
<td>1</td>
</tr>
</td>
<td>next to name:</td>
<td>12345</td>
</tr>
</tbody>
</table>
You can't write tr inside of td. You can add table wrapper for the <tr>
<table border='1'>
<tbody>
<tr>
<td>
<table>
<tr>
<td>Name:</td>
<td>iphone</td>
</tr>
<tr>
<td>Price:</td>
<td>123</td>
</tr>
<tr>
<td>Qty</td>
<td>1</td>
</tr>
</table>
</td>
<td>next to name:</td>
<td>12345</td>
</tr>
</tbody>
</table>

Using JQuery to select all <tr> elements with a specific class

The basic structure is a table with a few rows. I would like the top half of the table showing and the bottom half collapsed until a user clicks on the READ MORE cell. I have that functionality working but I can't get the JQuery right that selects all of the ".collapseThis" rows and hides them on page load.
Here is the table
<div id="tables">
<table class="expandableTable">
<tr>
<td></td>
<td></td>
</tr>
<tr class="accordion">
<td colspan="2">READ MORE</td>
</tr>
<tr class="collapseThis">
<td></td>
<td></td>
</tr>
</table>
<table class="expandableTable">
<tr>
<td></td>
<td></td>
</tr>
<tr class="accordion">
<td colspan="2">READ MORE</td>
</tr>
<tr class="collapseThis">
<td></td>
<td></td>
</tr>
</table>
</div>
Here is the JQuery.
$(document).ready(function () {
function getCollapsable($row) {
var children = [];
while ($row.next().hasClass('collapseThis')) {
children.push($row.next());
$row = $row.next();
}
return children;
}
function hideTableRows($row) {
children = getCollapsable($row);
$.each(children, function () {
$(this).toggle();
});
}
$('#tables').each($('expandableTable'), function () {
hideTableRows($(this).children().hasClass('.accordion'));
});
You can just use css to set the display value, there is no need to use jQuery to set the initial state.
If you want to use jQuery, use a simple selector like $('#tables .expandableTable .collapseThis').hide().
$(document).ready(function() {
//if you don't want to use css
//$('#tables .expandableTable .collapseThis').hide();
});
#tables .expandableTable .collapseThis {
display: none;
}
<div id="tables">
<table class="expandableTable">
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr class="accordion">
<td colspan="2">READ MORE</td>
</tr>
<tr class="collapseThis">
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
<table class="expandableTable">
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr class="accordion">
<td colspan="2">READ MORE</td>
</tr>
<tr class="collapseThis">
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
<table class="expandableTable">
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
<tr class="accordion">
<td colspan="2">READ MORE</td>
</tr>
<tr class="collapseThis">
<td>2.1</td>
<td>2.2</td>
</tr>
</table>
</div>

How to split one row into multiple row in html

I need to split one table row into multiple row when calling a js function
This is the table:
<table id="tab_calc">
<tr class="tr_calc">
<td>Sub Total</td>
<td>Tax</td>
<td>Freight</td>
<td>Insurance</td>
<td>Discount</td>
<td>Total</td>
<td>Amt Paid</td>
<td>Bal Due</td>
</tr>
I want to make it look like this after I call a function:
<table id="tab_calc">
<tr>
<td>Sub Total</td>
</tr>
<tr>
<td>Tax</td>
</tr>
<tr>
<td>Freight</td>
<td>Insurance</td>
<td>Discount</td>
</tr>
<tr>
<td>Total</td>
</tr>
<tr>
<td>Amt Paid</td>
</tr>
<tr>
<td>Bal Due</td>
</tr>
</table>
Try below code:
fiddler
$(document).ready(function(){
$('.tr_calc').replaceWith( $('.tr_calc').html()
.replace(/<td>/gi, "<tr> <td>")
.replace(/<\/td>/gi, "</td></tr>")
);
});

Categories