I have an html table with rows filled from loop and I want to delete the last two columns from all those rows inside click event on print button :
JS :
$("#print").on('click', function(){
//I want to remove columns HERE
})
How can I do this?
I'm not sure if that what you really looking for (delete columns or columns content) but you can try the followings suggestions.
Delete the last two columnns :
You can just call the following code that remove last child several times as much as the number of columns you want to remove :
$("table").find("th:last-child, td:last-child").remove();
$("#print").on('click', function(){
var remove_cols_number =2;
for(var i=0;i<remove_cols_number;i++){
$("table").find("th:last-child, td:last-child").remove();
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%" border='1'>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Bill</td>
<td>2</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>Gates</td>
<td>1</td>
</tr>
</table>
<br>
<button id='print' type="button">Print</button>
Delete the last two columns content :
You can get the columns length and remove one since the eq() use a zero based index, then use empty() to remove content of last one and the column before it last one -1 :
var columns_length = $("table th").length-1;
$("table tr").find("td:eq("+columns_length+"), td:eq("+(columns_length-1)+")").empty();
$("#print").on('click', function(){
var columns_length = $("table th").length-1;
$("table tr").find("td:eq("+columns_length+"), td:eq("+(columns_length-1)+")").empty();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%" border='1'>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
<td>Bill</td>
<td>2</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
<td>Gates</td>
<td>1</td>
</tr>
</table>
<br>
<button id='print' type="button">Print</button>
Related
I've got some text displaying in a table (oldschool, I know) and I'm trying to identify that specific <td> element so I can use jQuery to wrap() <a href> tags around it and convert it to a link.
The problem is, none of the <td>'s in the table have unique classes or ID's, and there will always be an unknown amount of <td>'s before the one I want to access, so I don't think I can use nth of child.
The ONLY unique way that <td> is identifiable is the <td> DIRECTLY before it, which will contain some text that will always be the same. Can I use jQuery to find that <td> based on the text inside it, then target the <td> directly after that? Or is there a better way to do this?
You can use jQuery to fetch element that contains specific text and access the next td as required with a single line of jQuery code. This won't thrown an exception in case when there is no next td.
$(document).ready(function() {
var yourVal = $('td:contains("2.2")').next('td').text();
console.log(yourVal);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
<td>1.4</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
</tr>
</tbody>
</table>
You are looking for the nextElementSibling of the <td> with unique textContent. In order to find it, loop over all the <td>s and then get the nextElementSibling of the <td> with unique textContent. And when you find it, break.
const tds = document.querySelectorAll("td")
for (let td of tds) {
if (td.innerText.includes("Larry")) {
const element = td.nextElementSibling
console.log(element.innerText)
break;
}
}
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
If you like jQuery, use this.
const td = jQuery("td:contains('Larry')").next("td").text()
console.log(td)
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
I have three input list and a submit button in a form.
there is a table under the form too.
I want when I click the submit button, see my input values in the table without reloading page.
<input name="Choose1">
<input name="Choose2">
<input name="Choose3">
<input type="submit" value"Add">
<table>
<tr>
<th>Field 1</th>
<th>Field 2</th>
<th>Field 3</th>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
</tr>
</table>
it's clear that at first table should be empty. add I should add an element for many times
Using jquery
$("#addRow").on('click', function(){
const html = "<tr><td>"+$('#td1').val()+"</td><td>"+$('#td2').val()+"</td><td>"+$('#td3').val()+"</td></tr>";
$('#bodyTable').append(html)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="Choose1" id="td1">
<input name="Choose2" id="td2">
<input name="Choose3" id="td3">
<button id="addRow" >Add </button>
<table>
<thead>
<tr>
<th>Field 1</th>
<th>Field 2</th>
<th>Field 3</th>
</tr>
</thead>
<tbody id="bodyTable">
<tr>
<td>Value 1</td>
<td>Value 2</td>
<td>Value 3</td>
</tr>
</tbody>
</table>
Assign Ids to access the controls and make button type to button:
<input id="Choose1" name="Choose1">
<input id="Choose2" name="Choose2">
<input id="Choose3" name="Choose3">
<input id="btnSubmit" type="button" value"Add">
<table id="myTable">
<tr>
<th>Field 1</th>
<th>Field 2</th>
<th>Field 3</th>
</tr>
</table>
now add event in jquery:
$(function(){
$("#btnSubmit").on('click', function(){
var val1 = $("#Choose1").val();
var val2 = $("#Choose2").val();
var val3 = $("#Choose3").val();
$('#myTable').append('<tr><td>'+ val1 +'</td><td>'+ val2 +'</td><td>'+ val3 +'</td></tr>');
});
})
I am trying to generate a HTML Table, that has rowSpan (as you see in the picture)
I manage to generate the table for columns 1 and 2 and 3. Here is the code:
<td rowspan="2"> a</td>
<td>bb</td>
<td>d</td>
</tr>
<tr>
<td>c</td>
<td>e</td>
</tr>
but when it gets to column4, I can't figure out what to do. I create a nested table but it doesn't work properly.
Anyone has any idea?
I think you're looking for this - the first column spans 3 rows, the middle columns span just a single row, and the top right column is again 2 rows spanned:
<table border="1">
<tr>
<th>col 1</th>
<th>col 2</th>
<th>col 3</th>
<th>col 4</th>
</tr>
<tr>
<td rowspan="3">a</td>
<td rowspan="2">b</td>
<td rowspan="2">c</td>
<td>f</td>
</tr>
<tr>
<td>g</td>
</tr>
<tr>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
</table>
See https://jsfiddle.net/gpnx0nqj/
Note that the second row only have two cells (td).
Let's say I have the following table format and I want to check if the table has a thead th. If the table has no thead th, the first child of tbody tr would be move as thead th.
How to check if the table contains header?
$(function() {
var th = $('table tbody tr:first td').map(function(i, e) {
return $('<th>').append(e.textContent).get(0);
});
$('table').prepend($('<thead>').append(th)).find('tr:first').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 4</th>
</tr>
</tbody>
</table>
You can check if the thead exists by selecting it and checking the length property of the resulting jQuery object.
Note that you need to wrap the th you append to the new thead with a tr element. I have also amended your code to work in cases where there are multiple tables in the DOM. Try this:
$(function() {
$('table').each(function() {
var $table = $(this);
if ($table.find('thead').length)
return;
var th = $table.find('tbody tr:first td').map(function(i, e) {
return $('<th />').append(e.textContent).get(0);
});
var $tr = $('<tr />').append(th);
var $thead = $('<thead />').append($tr);
$table.prepend($thead).find('tbody tr:first').remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 4</th>
</tr>
</tbody>
</table>
<table>
<thead>
<tr>
<th>Header
</tr>
</thead>
<tbody>
<tr>
<td>Foo</td>
</tr>
</tbody>
</table>
I have table:
HTML
<table id="mydata">
<thead>
<tr>
<th>Data 1</th>
<th>Data 2</th>
<th>Data 3</th>
<th>Data 4</th>
</tr>
</thead>
<tbody>
<tr class="main">
<td class="data_1">A</td>
<td class="data_2">B</td>
<td class="data_3">C</td>
<td class="data_4">D</td>
</tr>
</tbody>
</table>
When i'm using dataTable to sort with jquery:
JavaScript
jQuery('#mydata').dataTable({
"sDom": " ",
"bPaginate": false,
"bInfo": false,
'bFilter':false,
"aoColumns": [
null,
null,
null,
null
]
});
It's worked.
But, when i add child rows for main:
HTML
<table id="mydata">
<thead>
<tr>
<th>Data 1</th>
<th>Data 2</th>
<th>Data 3</th>
<th>Data 4</th>
</tr>
</thead>
<tbody>
<tr class="main">
<td class="data_1">A</td>
<td class="data_2">B</td>
<td class="data_3">C</td>
<td class="data_4">D</td>
</tr>
<tr class="detail-header">
<td><strong>A1</strong></td>
<td><strong>B1</strong></td>
<td><strong>C1</strong></td>
<td><strong>D1</strong></td>
</tr>
<tr class="detail">
<td><strong>A2</strong></td>
<td><strong>B2</strong></td>
<td><strong>C2</strong></td>
<td><strong>D2</strong></td>
</tr>
<tr class="control">
<td colspan="2">Show details</td>
<td colspan="2">Hide details</td>
</tr>
</tbody>
</table>
In that html: detail-header, detail and control are childs of main and they show when click to Show details, it's should ignore when sort but i seem they also sort by dataTable so i received error:
Uncaught TypeError: Cannot read property 'className' of undefined
dataTables does not accept colspans in <tbody>. Place the last row (the row with links) in a <tfoot> instead :
<tfoot>
<tr class="control">
<td colspan="2">Show details</td>
<td colspan="2">Hide details</td>
</tr>
</tfoot>
demo -> http://jsfiddle.net/71zcn578/