We provide you the solution for to remove some column values from a list of table rows and columns. How is it possible? We need to get column header name then you can remove.
Try the below code :-
<link rel=”stylesheet” href=”https://code.jquery.com/ui/1.11.4/themes/swanky-purse/jquery-ui.css”/>
<script src=”//code.jquery.com/jquery-1.12.4.js”></script>
<script src=”//code.jquery.com/ui/1.12.1/jquery-ui.js”></script>
<form id=”pg”>
</form>
<script>
$(‘<div id=”main” style=”float:left;width:20%;height:50%;”></div>’).appendTo(‘#pg’);
$(‘<table id=”tbl” style=”width:20%;height:20%;”><tr><th>Name</th><th>Title</th><th>Status</th><th>Date</th></tr><tr><td>Sh</td><td>Sample</td><td>Completed</td><td>12345</td></tr><tr><td>Vijay</td><td>Test</td><td>InProgress</td><td>6789</td></tr><tr><td>Meenu</td><td>Agenta</td><td>Pending</td><td>54747</td></tr></table>’).appendTo(‘#main’);
$(‘td’).css(‘border’,’3px solid #ccc’);
$(‘th’).css(‘border’,’3px solid #ccc’);
$(‘<br/><input type=”text” id=”tt” name=”txt”>’).appendTo(‘#main’);
$(‘<br/><br/><input type=”button” name=”Delete” value=”Delete” id=”btt”>’).appendTo(‘#main’);
$(‘#btt’).click(function(){
var a= $(‘input[name=”txt”]’).val();
alert(a);
display(a);
});
function display(sample){
var t = $(“th:contains(“+sample+”)”).index()+1;
if(t!=1){
$(‘th:nth-child(‘ + t + ‘)’).hide();
$(‘td:nth-child(‘ + t + ‘)’).hide();
}
else{
$(‘#tbl td:first-child’).hide();
$(‘#tbl th:first-child’).hide();
}
}
</script>
Result :-
This is the starting page view
Enter header name on text box, in which column you need to remove,
Click ‘Delete‘ button.
Title has removed on the below table view
We are the ISV Partners and Please reach us for custom development => www.merfantz.com
———————- We hope it will help to you ———————–
Author Bio
