Wanted to display all the row data inside the table BY ID - javascript

I wanted to fetch multiple row data in a table by ID but this code throwing all rows. IDK how to do that please review my code and give feedback. And also I attached the output image which I'm getting. I want to display all the row data inside the table where is (शिर्षक डेबिट क्रेडिट) these topics. [1]: https://i.stack.imgur.com/cFo7b.png
----modal-----
<script>
$(document).ready(function() {
$('.view_btn').click(function(e) {
e.preventDefault();
var id = $(this).closest('tr').find('.id').text();
$.ajax({
type: "GET",
url: " {{ route('biniyojan_popup_details') }}",
data: {
'checking_viewbtn': true,
'id': id,
},
//success: function(response){
success: function(data) {
var html = '';
var biniyojan_popup_details = data.biniyojan_popup_details;
if (biniyojan_popup_details.length > 0) {
for (let i = 0; i < biniyojan_popup_details.length; i++) {
html += `
<table border="1" class="table table-hover table-wrapper-scroll-y my-custom-scrollbar">
<thead class="text-white bg-primary" style="font-size: 14px;">
<tr>
<th scope="col">S.N </th>
<th scope="col">मिति </th>
<th scope="col">आ.ब </th>
<th scope="col">स्रोत व्यहोर्ने संस्था</th>
</thead>
<tbody class="bbody" style="font-size: 14px;">
<tr>
<td>` + biniyojan_popup_details\[i\]\['biniyojan_id'\] + `</td>
<td>` + biniyojan_popup_details\[i\]\['date'\] + `</td>
<td>` + biniyojan_popup_details\[i\]\['ab'\] + `</td>
<td>` + biniyojan_popup_details\[i\]\['school'\] + `</td>
</tr>
</tbody>
</table>
<table id="example" border="1" style=" width:50% ; " class="table table-hover table-wrapper-scroll-y my-custom-scrollbar">
<thead class="text-white bg-primary" style="font-size: 14px;">
<tr>
<th>शिर्षक</th>
<th>डेबिट</th>
<th>क्रेडिट</th>
</tr>
</thead>
<tbody class="text-dark" style="font-size: 14px;">
<tr>
<td>` + biniyojan_popup_details\[i\]\['kriyakalap'\] + `</td>
<td id="bujet">` + biniyojan_popup_details\[i\]\['cash'\] + `</td>
</tr>
<tr>
<td>` + biniyojan_popup_details\[i\]\['debit_credit_type'\] + `</td>
<td></td>
<td id="">` + biniyojan_popup_details\[i\]\['cash'\] + `</td>
</tr>
<tr class="text-white bg-secondary" style="font-size: 14px;">
<td style="font-weight:bold;">Total</td>
<td style="font-weight:bold;">` + biniyojan_popup_details\[i\]\['cash'\] + `</td>
<td style="font-weight:bold;">` + biniyojan_popup_details\[i\]\['cash'\] + `</td>
</tr>
</tbody>
</table>
`;
}
} else {
html += `
<tr>
<td colspan = "9" > Data not Found! </td>
</tr>
`;
}
$(".modal-body").html(html);
$('#exampleModalCenter').modal('show');
}
})
});
});
</script>
<!-- Modal Data -->][1]
----Controller-----
public function biniyojan_popup_details()
{
$biniyojan_popup_details = DB::table('biniyojan_details')
->leftJoin('biniyojan','biniyojan.biniyojan_id','biniyojan_details.biniyojan_id')
->get();
return response()->json(\['biniyojan_popup_details' => $biniyojan_popup_details\]);
}


Try this slight change. It adds a '=' to define what type of comparison we're making with biniyojan.biniyojan_id and biniyojan_details.biniyojan_id.
{
$biniyojan_popup_details = DB::table('biniyojan_details')
->leftJoin('biniyojan','biniyojan_details.biniyojan_id','=','biniyojan.biniyojan_id')
->get();
return response()->json(\['biniyojan_popup_details' => $biniyojan_popup_details\]);
}
You can try adding a where clause to your original code or try an alternative method using Models. This code works perfectly for me in my own project and I adapted it to your table names. I think you're trying to get details by an ID.
$biniyojan_popup_details = Biniyojan::where('biniyojan.biniyojan_id','=',$id)
->leftJoin('biniyojan_details','biniyojan.biniyojan_id','=','biniyojan_details.biniyojan_id')
->select('binoyojan_details.*','biniyojan.field1')
->get();

Related

How can I use a mask in values came from database?

I'm getting some data from my database and wanted to format it inside my view.
My code is simple, with a table bringing the data from database, but i want to show my phone with a mask: (12) 94832-3823.
Tried all sort os things, but no success, can anyone give me a hint?
My table code:
<table class="table table-bordered" id="example10" width="100%" cellspacing="0">
<thead>
<tr>
<th>{{ __('messages.serial no')}}</th>
<th>{{ __('messages.Delivery_Boy')}}</th>
<th>{{ __('messages.Delivery_Boy_Image')}}</th>
<th>{{ __('messages.Delivery_Boy_Phone')}}</th>
<th>{{ __('messages.Status')}}</th>
<th>{{ __('messages.action')}}</th>
</tr>
</tfoot>
<tbody>
#if(count($delivery_boy)>0)
#php $i=1; #endphp
#foreach($delivery_boy as $delivery_boys)
<tr>
<td>{{$i}}</td>
<td>{{$delivery_boys->delivery_boy_name}}</td>
<td align="center"><img src="{{url($delivery_boys->delivery_boy_image)}}" style="width: 21px;"></td>
<td>{{$delivery_boys->delivery_boy_phone}}</td>
<td>
#if($delivery_boys->is_confirmed==0)
Yes
No
#elseif($delivery_boys->is_confirmed == 1)
<span style="color:green;">Aprovado</span>
#else
<span style="color:red;">Reprovado</span>
#endif
</td>
<td>
<i class="fa fa-edit" style="width: 10px;"></i>
<button type="button" style="width: 28px; padding-left: 6px;" class="btn btn-danger" data-toggle="modal" data-target="#exampleModal{{$delivery_boys->delivery_boy_id}}"><i class="fa fa-trash"></i></button>
</td>
</tr>
#php $i++; #endphp
#endforeach
#else
<tr>
<td>No data found</td>
</tr>
#endif
</tbody>
</table>
How's it displaying now:
Thanks for your time!

The easiest way would be to remove the php echo phone and replace with hard coded text. Like that <td>xxx-xxx-xxx</td>.
UPDATE
You tagged your question with javascript. Javascript version:
Only important would be the regex pattern. /(\d{2})(\d{5})(\d+)/
javascript example
function formatPhoneNumber(phoneNumberString) {
var cleaned = ('' + phoneNumberString).replace(/\D/g, '');
var match = cleaned.match(/(\d{2})(\d{5})(\d+)/);
if (match) {
return '(' + match[1] + ') ' + match[2] + '-' + match[3];
}
return null;
}
p = "+5511920140349"
console.log( formatPhoneNumber(p) )
Appendix
Change this line with the phone number from <td>{{$delivery_boys->delivery_boy_phone}}</td> to <td class="phonenumbers">{{$delivery_boys->delivery_boy_phone}}</td>. Now, you have a seelctor and can fetch the lines and modified by js. like that:
const nums = document.querySelectorAll('.phonenumber');
console.log(nums)
nums.forEach(td => {
const p = td.innerHTML;
td.innerHTML = formatPhoneNumber(p)
})
function formatPhoneNumber(phoneNumberString) {
var cleaned = ('' + phoneNumberString).replace(/\D/g, '');
var match = cleaned.match(/(\d{2})(\d{5})(\d+)/);
if (match) {
return '+(' + match[1] + ') ' + match[2] + '-' + match[3];
}
return null;
}
<table border="1px">
<tr>
<td>abc</td>
<td class="phonenumber">123456789</td>
</tr>
<tr>
<td>abc</td>
<td class="phonenumber">123456789</td>
</tr>
<tr>
<td>abc</td>
<td class="phonenumber">123456789</td>
</tr>
</table>

What you could do with a simple regex replace, is replacing all the digits into a X.
So on the place where you want to show the 'masked' phone number you can place this:
preg_replace('/\d/', 'X', '+5511920140349');

How can I filter data in a table on table row click using jQuery?

I have a table in my site and it has player names and servers. But I need them to be clickable, and needs to have filtering effect. What I mean is, If you click on player name => the leaderboards will load again as usual and show the servers that the player plays..
and server name => the leaderboards will load again as usual and show the players that play on the server
Another Example: Now let assume I click on username of "ken". After i click on that, the leaderboards only show usernames "ken" and servers that "ken" plays on.
Note: Data from tables are fetch from external JSON file which is https://dayz-n-chill.herokuapp.com/getglobal
The Leaderboard image: image
My Script:
function responseHandler(res) {
res.forEach(function (row, i) {
row.index = i + 1
})
return res
}
function ajaxRequest(params) {
var url = 'https://dayz-n-chill.herokuapp.com/getglobal'
jQuery.get(url, jQuery.param(params.data)).then(function (res) {
params.success(res);
console.log(res);
// this is what i tried so far
var x = $("td").text();
$("td").click(function () {
var rows = $("#tableBody").find("tr").hide();
rows.filter(":contains('$(this).text()')").show();
})
})
}
//
My HTML Code:
<table class="table table-bordered table-hover" data-toggle="table" data-search="true" data-ajax="ajaxRequest"
data-pagination="true" data-height="700" data-response-handler="responseHandler" data-toolbar="#toolbar">
<thead class="thead-dark">
<tr>
<th scope="col" data-field="index" data-sortable="true">Rank</th>
<th scope="col" data-field="userName" data-sortable="true" id="user_name">Username</th>
<th scope="col" data-field="serverName" data-sortable="true">Server Name</th>
<th scope="col" data-field="Kills" data-sortable="true">Kills</th>
<th scope="col" data-field="Deaths" data-sortable="true">Deaths</th>
<th scope="col" data-field="headshot" data-sortable="true">Headshots</th>
<th scope="col" data-field="killStreak" data-sortable="true">Kill Streak</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>

I if understood you right, this is what your looking for:
jsonData = [
{"id":10615,"userName":"RareCanadian295","Kills":2900,"Deaths":989,"headshot":557,"killStreak":0,"serverName":"DZNC_L"},
{"id":10655,"userName":"thildas","Kills":2030,"Deaths":1222,"headshot":422,"killStreak":5,"serverName":"ArmedToTheTeeth"},
{"id":12408,"userName":"Hells-Angelmc","Kills":1297,"Deaths":701,"headshot":308,"killStreak":0,"serverName":"420HighlootDM"},
{"id":103647,"userName":"thildas","Kills":1141,"Deaths":489,"headshot":202,"killStreak":0,"serverName":"420HighlootDM"},
{"id":11142,"userName":"YunG_Legend420","Kills":1101,"Deaths":964,"headshot":171,"killStreak":7,"serverName":"DZNC_L"},
{"id":10613,"userName":"Hells-Angelmc","Kills":807,"Deaths":621,"headshot":105,"killStreak":0,"serverName":"ArmedToTheTeeth"},
{"id":68686,"userName":"XxDGKallDAY3xX","Kills":690,"Deaths":413,"headshot":110,"killStreak":3,"serverName":"NWAFBattleground"},
{"id":10621,"userName":"thildas","Kills":643,"Deaths":527,"headshot":129,"killStreak":5,"serverName":"DZNC_L"},
{"id":11513,"userName":"Hells-Angelmc","Kills":630,"Deaths":515,"headshot":140,"killStreak":0,"serverName":"420HighlootDM"},
{"id":10642,"userName":"rha84","Kills":583,"Deaths":476,"headshot":80,"killStreak":0,"serverName":"ArmedToTheTeeth"}];
fillTable(jsonData);
$("#tblPlayers").on("click", ".js-data", function() {
var type = $(this).data("type");
var value = $(this).data("value");
filterData(type, value);
});
function resetFilter() {
fillTable(jsonData);
}
function filterData(type, value) {
var newJson = "";
if(type == "userName") {
newJson = jsonData.filter(function (el) {
return el.userName == value;
});
}
else if(type == "serverName") {
newJson = jsonData.filter(function (el) {
return el.serverName == value;
});
}
//console.log(newJson);
fillTable(newJson);
}
function fillTable(data) {
var html = '';
$("#tblPlayers tbody").empty();
for(var item of data) {
html += '<tr>' +
'<td>' + item.id + '</td>' +
'<td><a href="#" class="js-data" data-type="userName" data-value=' + item.userName + '>' + item.userName + '</a></td>' +
'<td><a href="#" class="js-data" data-type="serverName" data-value=' + item.serverName + ' >' + item.serverName + '</a></td>' +
'<td>' + item.Kills + '</td>' +
'<td>' + item.Deaths + '</td>' +
'<td>' + item.headshot + '</td>' +
'<td>' + item.killStreak + '</td>' +
'</tr>';
}
$("#tblPlayers tbody").append(html);
}
a {
font-weight: bold;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button onClick="resetFilter()">Reset Filter</button>
<br><br>
<table id="tblPlayers" class="table table-bordered table-hover" data-toggle="table" data-search="true" data-ajax="ajaxRequest" data-pagination="true" data-height="700" data-response-handler="responseHandler" data-toolbar="#toolbar">
<thead class="thead-dark">
<tr>
<th scope="col" data-field="index" data-sortable="true">Rank</th>
<th scope="col" data-field="userName" data-sortable="true" id="user_name">Username</th>
<th scope="col" data-field="serverName" data-sortable="true">Server Name</th>
<th scope="col" data-field="Kills" data-sortable="true">Kills</th>
<th scope="col" data-field="Deaths" data-sortable="true">Deaths</th>
<th scope="col" data-field="headshot" data-sortable="true">Headshots</th>
<th scope="col" data-field="killStreak" data-sortable="true">Kill Streak</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>

how to send object from html ng-repeat to js function

I am getting data from db and put it in a scope, then iterate on these data by ng-repeat in html.
what i am trying to do is to send the selected object when the user check on a checkbox to get another data based on an id for example . i tried to use ng-model and ng-change on the checkbox but it sends only true or false .
HTML
<div id="frame" class="widget-content" style="height:50vh; overflow:auto;">
<table style="font-size: 12px;display: inline-block;">
<thead>
<tr>
<th>Check</th>
<th>Group Code</th>
<th>Group Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="g in Groups | unique : 'Group_code'"
ng-click="showInEdit(g)"
ng-class="{selected:g === selectedRow}">
<td><input type="checkbox" ng-model="g"
ng-true-value="g" ng-change="Getrequest2(g)"/>
<td>{{g.Group_code}}</td>
<td>{{g.group_name_latin}}</td>**
</tr>
</tbody>
</table>
<table style="font-size: 12px; float: left;">
<thead>
<tr>
<th>Check</th>
<th>Item Code</th>
<th>Item Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="i in items | unique : 'Item_code'"
ng-click="showInEdit(i)"
ng-class="{selected:i === selectedRow}">
<td><input type="checkbox" />
<td>{{i.Item_code}}</td>
<td>{{i.ITEM_NAME_LATIN}}</td>
</tr>
</tbody>
</table>
</div>
angularjs
$scope.Getrequest1 = function (g) {
//console.log(g);
$scope.typecd = g.TypeCode;
$scope.ShowLoading('slow');
LOASrv.GetGroup("LOAApprovalSetup/GetGroup" +
"?typ=" + g.TypeCode +
'&hospid=' + $scope.hospitalid +
'&userky=' + $scope.userkey
).then(function (response) {
$scope.Groups = (response.data);
$scope.HideLoading('slow');
})
}
$scope.Getrequest2 = function (i) {
console.log(i);
$scope.ShowLoading('slow');
LOASrv.GetItem("LOAApprovalSetup/GetItem" +
"?typ=" + $scope.typecd +
'&hospid=' + $scope.hospitalid +
'&userky=' + $scope.userkey +
'&groupcd=' + i
).then(function (response) {
$scope.items = (response.data);
$scope.HideLoading('slow');
})
}

You’re assigning ‘g’ object to checkbox ng-model.
This changes the value of ‘g’ from object to boolean on checkbox select.
That’s why you’re getting true/false
Change ng-model=“g.someBooleanName” and try

How to fetch JSOn response into HTML table using pure JS?

This is HTML markup:
<table id="prodTable" class="table table-bordered" style="color:white">
<thead class="thead">
<tr class="font-weight-bold">
<th>No.</th>
<th>Name</th>
<th>Category</th>
<th>Slug</th>
<th>Price</th>
<th>GST Price</th>
<th>Keywords</th>
<th>Specification</th>
<th>Description</th>
<th>Attributes</th>
<th>Available Stock</th>
<th>Payment Method</th>
<th>Approval Status</th>
<th>Approve</th>
<th>Deal of the Day</th>
<th>Edit & Delete</th>
</tr>
</thead>
<tbody class="tbody">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td><lable><input type="checkbox" id="approveProd" name="approval" value="approval">Approve</label></td>
<td><label><input type="checkbox" id="DealoftheDay" name="dealoftheday" value="dealoftheday">Deal of the Day</label></td>
<td><button class="btn btn-outline-info" type="button"><i class="fa fa-pencil-square"></i></button> <button class="btn btn-outline-danger" type="button"><i class="fa fa-trash"></i></button></td>
</tr>
</tbody>
</table>
and my js is
function getProductsData() {
var data = "";
var type = "application/x-www-form-urlencoded";
var url = "get_product_data";
var asyn = "true";
var method = "POST";
var respCallback = function(resp){
var proddata = JSON.parse(resp);
var table = document.getElementById('prodTable');
console.log(table);
for (var i = 0; i < proddata.length; i++) {
console.log(proddata[i]);
};
}
var res=serverRequest(data,method,url,asyn,type,respCallback);
}
the getProductsData() is a onload function written in the body and am getting the response as JSON.
I need to know how to populate the JSON response into the table. Am new to js and i dont need jquery code. Because am learning js.
Thanks in advance.

Here is the short example which will help you, how to append the json data in HTML Table.
Example :-
function append_json_data(data){
var table = document.getElementById('prodTable');
data.forEach((object) => {
var tr = document.createElement('tr');
tr.innerHTML = '<td>' + object.No + '</td>' +
'<td>' + object.Name + '</td>' +
'<td>' + object.Category + '</td>' +
'<td>' + object.Slug + '</td>';
'<td>' + object.GST_Price + '</td>';
table.appendChild(tr);
});
}
And further you can apply the td tag for other elements as well, As I am showing you how to append the data to HTML you can add the tag data after 'GST_Price' same as above.

addClass with multiple results from find

I'm using this function to add the class hide to the table row that contains the value of my variable text. The problem is that usually my selected td can get two values, but this function only works well with one value.
My tables:
<div id="csvtextcomptb" class="tableunform"><table cellspacing="1"
cellpadding="1" border="1"><thead><tr><th>TABLE</th><th>TAG</th><th>DATE</th><th>STATUS</th><th>Key</th><th>Prev</th></tr></thead>
<tbody><tr><td>COMP</td><td> COMP_TRUCK </td><td>17/10/2017</td><td>Prev(1)</td><td>CA5520</td><td>MP < 1K</td></tr>
<tr class="hide"><td>COMP</td><td> COMP_TRUCK </td><td>17/10/2017</td><td>Prev(2)</td><td>CA5520</td><td>MP > 1K</td></tr>
<tr class="hide"><td>COMP</td><td> COMP_TRUCK </td><td>17/10/2017</td><td>Prev(2)</td><td>CA5534</td><td>MP > 1K</td></tr>
<tr class="hide"><td>COMP</td><td>COMP_TRUCK </td><td>17/10/2017</td><td>Prev(2)</td><td>CA5328</td><td>MP > 1K</td></tr></tbody></table></div>
<table id="filter_crca">
<tbody>
<tr>
<td class="pointer selected">MP < 1K</td>
<td class="pointer">MP > 1K</td>
</tr>
</tbody>
</table>
Function:
$(document).on("click","[id*='filter_'] tbody td", function(e){
$(this).toggleClass('selected');
var prev = $(this).text().trim();
var tbid = $(this).closest('table').attr('id');
var regExp = /[^\*filter_]\w+/;
var tableid = regExp.exec(tbid.toString());
var tipotb = tableid.toString().split('_')[0];
var text = $('#filter_' + tableid).find("td").map(function(){
if( $(this).hasClass("selected") ) {
return $(this).text()
}
}).get();
$.each(text, function(index, value){
$('#csvtext' + tipotb + 'tb tbody').find("tr:contains('" + tableid.toString().toUpperCase() + "'):contains('" + value + "')").removeClass('hide');
$('#csvtext' + tipotb + 'tb tbody').find("tr:contains('" + tableid.toString().toUpperCase() + "'):not(:contains('" + value + "'))").addClass('hide');
});
});
How can I change this function to read those values of td with selected class and merge them to add or remove hide?
Thanks!

Hope this is what you are looking for:
$(document).on("click", "[id*='filter_'] tbody td", function (e) {
var prev = $(this).text().trim();
var tbid = $(this).closest('table').attr('id');
var regExp = /[^\*filter_]\w+/;
var tableid = regExp.exec(tbid.toString());
var tipotb = tableid.toString().split('_')[0];
//Added code
$('#filter_' + tableid).find("td").not(this).removeClass('selected');
$(this).toggleClass('selected');
var text = $('#filter_' + tableid).find("td.selected").text();
$('#csvtext' + tipotb + 'tb tbody tr').addClass("hide");
//End
$('#csvtext' + tipotb + 'tb tbody').find("tr:contains('" + tableid.toString().toUpperCase() + "'):contains('" + text + "')").removeClass('hide');
//$('#csvtext' + tipotb + 'tb tbody').find("tr:contains('" + tableid.toString().toUpperCase() + "'):not(:contains('" + text + "'))").addClass('hide');
});
.selected {
color: red;
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="csvtextcomptb" class="tableunform">
<table cellspacing="1" cellpadding="1" border="1">
<thead>
<tr>
<th>TABLE</th>
<th>TAG</th>
<th>DATE</th>
<th>STATUS</th>
<th>Key</th>
<th>Prev</th>
</tr>
</thead>
<tbody>
<tr>
<td>COMP</td>
<td> COMP_TRUCK </td>
<td>17/10/2017</td>
<td>Prev(1)</td>
<td>CA5520</td>
<td>MP < 1K</td>
</tr>
<tr class="hide">
<td>COMP</td>
<td> COMP_TRUCK </td>
<td>17/10/2017</td>
<td>Prev(2)</td>
<td>CA5520</td>
<td>MP > 1K</td>
</tr>
<tr class="hide">
<td>COMP</td>
<td> COMP_TRUCK </td>
<td>17/10/2017</td>
<td>Prev(2)</td>
<td>CA5534</td>
<td>MP > 1K</td>
</tr>
<tr class="hide">
<td>COMP</td>
<td>COMP_TRUCK </td>
<td>17/10/2017</td>
<td>Prev(2)</td>
<td>CA5328</td>
<td>MP > 1K</td>
</tr>
</tbody>
</table>
</div>
<table id="filter_comp">
<tbody>
<tr>
<td class="pointer selected">MP < 1K</td>
<td class="pointer">MP > 1K</td>
</tr>
</tbody>
</table>

I dont knkow if the below snippet is your need , but I've set some change in your code to sweet your demand , also you have wrong table associated to it's filter id !
See below snippet :
$(document).on("click", "[id*='filter_'] tbody td", function(e) {
$(this).toggleClass('selected');
var prev = $(this).text().trim();
var tbid = $(this).closest('table').attr('id');
var regExp = /[^\*filter_]\w+/;
var tableid = regExp.exec(tbid.toString());
var tipotb = tableid.toString().split('_')[0];
$('#csvtext' + tipotb + 'tb tbody').find("tr").addClass('hide');
$('#filter_' + tableid).find("td").each(function() {
if ($(this).hasClass("selected")) {
var text = $(this).text();
$('#csvtext' + tipotb + 'tb tbody').find("td:contains('" + text + "')").parent('tr').removeClass('hide');
}
});
});
.pointer {
cursor: pointer;
border: 1px solid black;
}
.selected {
color: red;
font-weight: bold;
}
.hide {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="csvtextcrcatb" class="tableunform">
<table cellspacing="1" cellpadding="1" border="1">
<thead>
<tr>
<th>TABLE</th>
<th>TAG</th>
<th>DATE</th>
<th>STATUS</th>
<th>Key</th>
<th>Prev</th>
</tr>
</thead>
<tbody>
<tr>
<td>COMP</td>
<td> COMP_TRUCK </td>
<td>17/10/2017</td>
<td>Prev(1)</td>
<td>CA5520</td>
<td>MP < 1K</td>
</tr>
<tr >
<td>COMP</td>
<td> COMP_TRUCK </td>
<td>17/10/2017</td>
<td>Prev(2)</td>
<td>CA5520</td>
<td>MP > 1K</td>
</tr>
<tr >
<td>COMP</td>
<td> COMP_TRUCK </td>
<td>17/10/2017</td>
<td>Prev(2)</td>
<td>CA5534</td>
<td>MP > 1K</td>
</tr>
<tr >
<td>COMP</td>
<td>COMP_TRUCK </td>
<td>17/10/2017</td>
<td>Prev(2)</td>
<td>CA5328</td>
<td>MP > 1K</td>
</tr>
</tbody>
</table>
</div>
<table id="filter_crca">
<tbody>
<tr>
<td class="pointer selected">MP < 1K</td>
<td class="pointer selected">MP > 1K</td>
</tr>
</tbody>
</table>

Categories