Develop Reference

How do I filter a table by any matching code/name and not every available field

I'm trying to do the following: I have a table populated with data from the DB. Apart from that, I have an input where you can write something and a button that will filter, only showing the lines that have that string. This is working now!
The thing is, the input should only allow you to filter by foo.name/foo.code (two propertys of my entity).
I'm adding the code I have in case anyone can guide me out, I've tried several things but this are my first experiences with JQuery while I have a strict story-delivery time. Thanks everyone!
<tbody>
<c:forEach var="foo" items="${foo}">
<tr id = "fooInformation" class="mtrow">
<th id="fooName" scope="row">${foo.name}</th>
<td id="fooCode" class="left-align-text">${foo.code}</td>
<td class="left-align-text">${foo.country}</td>
<td class="left-align-text">${foo.region}</td>
<td class="left-align-text">${foo.subregion}</td>
</tr>
</c:forEach>
</tbody>
$("#search").click(function () { -> button id
var value = $("#fooRegionSearch").val(); -> value of the input
var rows = $("#fooRegionTable").find("tr"); -> table id
rows.hide();
rows.filter(":contains('" + value + "')").show();
});

To start with, your HTML is invalid - there cannot be elemenets with duplicate IDs in HTML. Use classes instead of IDs.
Then, you need to identify which TRs pass the test. .filter can accept a callback, so pass it a function which, given a TR, selects its fooName and fooCode children which contain the value using the :contains jQuery selector:
$("#search").click(function() {
var value = $("#fooRegionSearch").val();
var rows = $("#fooRegionTable").find("tr");
rows.hide();
rows.filter(
(_, row) => $(row).find('.fooName, .fooCode').filter(`:contains('${value}')`).length
).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="fooRegionTable">
<tr id="fooInformation" class="mtrow">
<th class="fooName" scope="row">name1</th>
<td class="fooCode" class="left-align-text">code1</td>
<td class="left-align-text">${foo.country}</td>
<td class="left-align-text">${foo.region}</td>
<td class="left-align-text">${foo.subregion}</td>
</tr>
<tr id="fooInformation" class="mtrow">
<th class="fooName" scope="row">name2</th>
<td class="fooCode" class="left-align-text">code2</td>
<td class="left-align-text">${foo.country}</td>
<td class="left-align-text">${foo.region}</td>
<td class="left-align-text">${foo.subregion}</td>
</tr>
</table>
<button id="search">click</button><input id="fooRegionSearch" />

javascript selector not returning all elements with matching class

I am using datatables to display table data. this table has an action column to remove record. I am trying the achieve the delete action by adding the event listener to the specific class. When i am trying to get the elements by the class name it is returning only first page elements of the datatable event though we have 5 pages. Can you help me in this regard.
var lastName = document.querySelectorAll('.lastname');
console.log(lastName);
i need the solution in plain javascript.
<table id="example" class="display nowrap" width="100%" cellspacing="0">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td><button class="btn btn-primary lastname" name="delete"></td>
</tr>
</table>
<script>
$(document).ready(function() {
$('#example').DataTable(
);
var lastName = document.querySelectorAll('.lastname');
console.log(lastName);// i am expecting this should return all elements with class **lastname**.
});
</script>
I have only included one row. assume we have 50 rows.

you can include the element like div
try this.
var lastName = document.querySelectorAll('div.lastname');
console.log(lastName);
you can read this Documentation for better information.

How to execute a function with different arguments while having multiple ID's in javascript?

I have a table showing me two parameters. What I would like to do is change the value of each of these parameters when a button is clicked. So each parameter has its own button with its own specific Ids (made with jinja2). for the value to be changed, I have to take the name of the parameter as an argument in a function, please look at the below picture:
my actual setup
So I have my input box and my button to be clicked:
<td> <input type=number size=5 id="{{key}}"> </td>
<td> <button onClick="change('{{key}}')" name="{{key}}">change value</button> </td>
the hard part is that, the change has to be made by executing a python script, so my function is described as :
function change(key){
$.getJSON($SCRIPT_ROOT + '/_change_value', {
a: $('input[name="key"]').val(),
b: $('button[name="key"]').val()}, function(data) { alert("Value was changed to " + data.result);});
}
For testing purpose I just made a python function that will return a only, to check if all went good, but unfortunately.
#app.route('/_change_value')
def change_value():
a = request.args.get('a', 0, type=int)
b = request.args.get('b', 0, type=int)
return jsonify(result=a)
a is returned as 0 always... I'm glad if someone can help me with this
I'm pretty sure the value key is not passed. Thanks a lot in advance
Edit: I made a mistake posting this question, id is present instead of name for the input, but still that did not resolve my problem...

Here you go with a solutio https://jsfiddle.net/1dvjqy11/
$('button').click(function(){
var a = $(this).closest('tr').find('input[type="number"]').val();
var b = $(this).closest('tr').find('td').first().html();
console.log(a, b);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Parameter</th>
<th>Value</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>GPS_Inject_to</td>
<td>127</td>
<td>
<input type="number" size=5 />
</td>
<td>
<button>
Change Value
</button>
</td>
</tr>
<tr>
<td>RPM2_SCALING</td>
<td>1</td>
<td>
<input type="number" size=5 />
</td>
<td>
<button>
Change Value
</button>
</td>
</tr>
</tbody>
</table>
I've used jQuery closest to get the parent tr and used jQuery find method to find the child elements.
Hope this will help you.

Set val to td by JSON

Try to set my td value from my JavaScript JSON. But it dun seems to work when I inspect the element. However the html works just not the value. Not sure what is the problem. Tried changing the id to class too but it didnt work as well.
$(document).ready(function(){
$(".login_a").click(function(){
var test = $(this).attr('data-id');
var topost = 'getMilestoneDetail.php='+test;
var returnResults = $.getJSON('getMilestoneDetail.php?id='+test,function(data)
{
$("#td_projectName").html(data.projectName);
$("#budget_amt").html(data.budget);
$("#milestone_1").html(data.mileStone1);
$("#percentage_1").html(data.percentage1);
$("#percentage_1").val(data.percentage1);
});
});
</script>
<div id="login_form">
<table border=1>
<tr>
<th> Project Name </th>
<td id="td_projectName">
</td>
</tr>
<tr>
<th> Budget</th>
<td id="budget_amt">
</td>
</tr>
<tr>
<th>Stages</th>
<th>Payment Percentage</th>
</tr>
<tr>
<td id="milestone_1">
</td>
<td id="percentage_1">
</td>
</tr>

VAL is not a valid attribute of a TD, and that is why you cannot set it. If you want to store some data as an attribute of the node, the use setAttribute to store it. Example:
Straight JS:
document.getElementById('percentage_1').setAttribute('bob', 'your uncle');
Or using jQuery:
$('#percentage_1').attr('bob', 'your uncle');
You would use getAttribute, or .attr, to get the value later, e.g.
var bob = document.getElementById('percentage_1').getAttribute('bob');
or
$('#percentage_1').attr('bob');
Note that non-standard attributes won't validate and may be frowned on, but are common fixtures in web applications. You can use jQuery's .data method to properly set data on a node if you are unconcerned with older browser support.

The .val(value) method is primarily used to set the values of form elements such as input, select and textarea.
You can use a hidden field to keep the value or you can use .text() method to get the text of td.
<td id="percentage_1">
<input type="hidden" id="percentage_1_val" />
</td>
$("#percentage_1_val").val(data.percentage1);
Get the value.
$("#percentage_1_val").val();
// or you can use $("#percentage_1").text();

jQuery: Getting value from input array

We have the following form:
<form>
...
<table width="100%" cellspacing="0" class="datagrid_ppal">
<tbody>
<tr>
<th scope="row">Area 1 <input name="config_line" type="hidden" value="0,5,50" /></th>
<td class="gantt"> </td>
<td class="gantt"> </td>
<td class="gantt"> </td>
...
</tr>
</tbody>
</table width="100%" cellspacing="0" class="datagrid_ppal">
...
<form>
What we need is to get the first, second or third from the hidden input value. We have tried this and didn't work:
var value = $('th').children('input:hidden').val();
Can anyone help us? We would really appreciate it.

The value of your hidden field is not an array, but just the string: "0,5,50".
To retrieve that value using jQuery use:
$('input[name=config_line]').val()
To split that string into an array use the split() method.
Combined:
var firstValue = $('input[name=config_line]').val().split(",")[0]; // etc...

var value = $('input[name=config_line]').val();
var valueArry = value.split(',');
var v1 = valueArry[0];
var v2 = valueArry[1];
var v3 = valueArry[2];

You'll find details Here .
var value = $('th').children("input[type='hidden']").val();
should work.