I am new to JQuery. I want to find my inputted value in many labels. I have a Find button. Here is my html. Here is my screenshot.
And here is my JQuery code, i tried different codes, but none of them seems to find what I am looking for, below my code has an error.
$(".button1").on("click", function() {
var el = document.getElementById("labelValue")
text = (el.innerText || el.textContent);
alert(text);
});
and here is my Code 2 which is not working also.
$(".button1").on("click", function() {
var q = $(this).val();
$(this).parent().find('label.labelValue').html(q);
console.log(q);
alert(JSON.stringify(q));
});
and here is my html code.
<div class="row g-0" id="chartTen" style="display:none;">
<h4 class="card-title">TANK REPLIMISHMENT RATE</h4>
<label>TEST METHOD </label> <select onchange="reveal_test(this)">
<!--<select id="reveal_label" name="reveal_label">-->
<option disabled selected style="font-weight: bold">SELECT AN OPTION</option>
<option value="testM1" style="font-weight: bold">HYDRANT FLOW TESTER</option>
<option value="testM2" style="font-weight: bold">PROBE</option>
<option value="testM3" style="font-weight: bold">ULTRASONIC</option>
</select><br>
<h4 class="card-title" style="display:none;" id="probe">ULTRASONIC TESTER</h4>
<label style="display:none;" id="probeLabel"><input type="text" /> FLOW RATE L/S </label>
<h4 class="card-title" id="ultra" style="display:none;">PROBE TESTER</h4>
<table id="dataTable2" style="display:none;">
<caption><button data-op="add" title="add new row"> ✚ </button> </caption>
<thead>
<tr>
<th>SYSTEM REQUIREMENTS</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<label></label>
<input type="text6" value="0" class="randomColor" />
<label> L/MIN @ </label>
<button data-op="del" title="delete row"> ✖ </button>
<button class="button1">FIND</button>
</td>
</tr>
</tbody>
</table>
</div>
<br>
<table id="annubarHead" style="display:none;">
<!--<table>-->
<thead>
<tr>
<th style="width: 750px; background-color: gray;">ANNUBAR FLOW TEST RESULTS</th>
</tr>
</thead>
</table>
<table id="annubarHeadTable" style="display:none;">
<tbody>
<tr>
<td style="background-color: gray; text-align: center;">
INCHES OF MERCURY
</td>
<td style="background-color: gray; text-align: center; width: 100% !important;">
MODEL 20T, SINGLE MOUNT 3/8" Dia Probe Size<br>
<select onchange="reveal_label(this)">
<!--<select id="reveal_label" name="reveal_label">-->
<option disabled selected style="font-weight: bold">SELECT AN OPTION</option>
<option value="dn1" style="font-weight: bold">20T DN50</option>
<option value="dn2" style="font-weight: bold">20T DN65</option>
<option value="dn3" style="font-weight: bold">20T DN80</option>
<option value="dn4" style="font-weight: bold">20T DN90</option>
<option value="dn5" style="font-weight: bold">20T DN100</option>
<option value="dn6" style="font-weight: bold">20T DN125</option>
<option value="dn7" style="font-weight: bold">20T DN150</option>
</select>
</td>
</tr>
<tr>
<td>
<label>
0
</label>
</td>
<td>
<label for="labelValues" id="dnValue0" style="display:none;">0.00</label>
<label for="labelValues" id="dnValue1" style="display:none;">0.00</label>
<label for="labelValues" id="dnValue2" style="display:none;">0.00</label>
<label for="labelValues" id="dnValue3" style="display:none;">0.00</label>
<label for="labelValues" id="dnValue4" style="display:none;">0.00</label>
<label for="labelValues" id="dnValue5" style="display:none;">0.00</label>
<label for="labelValues" id="dnValue6" style="display:none;">0.00</label>
</td>
</tr>
Whenever i click the button, i want to find the nearest value or the same value and will have a prompt where it is located. Your help will be a great benefit for me. Thank you so much. Please look at the comments.
First you can have a function to extract the data from your current table:
/* get data from current table */
function getData() {
/* loop through table row */
const data = $('#the-table').find('tbody > tr').toArray().map(row => {
/* get inches and value from cells in each row by class name */
const inches = $(row).find('.label-inch').first().html()
const value = $(row).find('.label-value').first().html()
/* return as object e.g. { inches: 1, value: 12.34 } */
return { inches, value }
})
return data
}
Function above should return an array of object like this:
[
{
"inches": "0",
"value": "0.00"
},
{
"inches": "1",
"value": "220.77"
},
/* ...more */
]
Next you need a function to find the closest value from the data you have extracted from function above by a given value:
/* find closest value */
function findClosest(needle) {
/* get current table data */
const data = getData()
/* find closest value by compare the value difference */
const closest = data.reduce((a, b) => {
/* comparing "value" attribute */
return Math.abs(b.value - needle) < Math.abs(a.value - needle) ? b : a
})
return closest
}
Finally bind a click event on the Find button to read user input and get the closest value result:
/* bind click event on "Find" button */
$('#find').click(function() {
/* get user input */
const input = $('#value-to-find').val()
/* find the closest value based on user input */
const closest = findClosest(input)
/* render the result */
const html = `Inches: ${closest.inches}, value: ${closest.value}`
$('#result').html(html)
})
Demo:
$(document).ready(function() {
/* *This is not part of the function* */
generateTheChart()
/* bind click event on "Find" button */
$('#find').click(function() {
/* get user input */
const input = $('#value-to-find').val()
/* find the closest value based on user input */
const closest = findClosest(input)
/* render the result */
const html = `Inches: ${closest.inches}, value: ${closest.value}`
$('#result').html(html)
})
})
/* get data from current table */
function getData() {
/* loop through table row */
const data = $('#the-table').find('tbody > tr').toArray().map(row => {
/* get inches and value from cells in each row by class name */
const inches = $(row).find('.label-inch').first().html()
const value = $(row).find('.label-value').first().html()
/* return as object e.g. { inches: 1, value: 12.34 } */
return {
inches,
value
}
})
return data
}
/* find closest value */
function findClosest(needle) {
/* get current table data */
const data = getData()
/* find closest value by compare the value difference */
const closest = data.reduce((a, b) => {
/* comparing "value" attribute */
return Math.abs(b.value - needle) < Math.abs(a.value - needle) ? b : a
})
return closest
}
/* *This is not part of the function* */
function generateTheChart() {
const values = ['0.00', '220.77', '312.22', '382.39', '441.54', '493.66', '540.78', '584.11', '624.43', '662.31', '698.14', '732.21', '764.77', '796.00', '826.05', '855.04', '883.08']
const html = values.reduce((str, value, index) => `${str}<tr><td class="label-inch">${index}</td><td class="label-value">${value}</td></tr>`, '')
$('#the-table').find('tbody').append(html)
}table,
td,
th {
border: 1px solid;
padding: .5rem 1rem;
}
table {
border-collapse: collapse;
}<label for="value-to-find">
Find
</label>
<input id="value-to-find" type="text" name="find">
<button id="find" type="button">Find</button>
<p>Result: <span id="result"></span></p>
<hr />
<table id="the-table">
<thead>
<tr>
<th>Inches of mercury</th>
<th>Value</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>New example added of how to select the value based on your html provided:
/* get first column from row, and get value from label */
const inches = $(row).find('td').first().find('label').html()
/* get second column from row, and get value from label where is invisible */
const value = $(row).find('td').eq(1).find('label:visible').html()