How to change css of an item by its content

[erezvol]

Hello rescuers,
Here is the code of my form whick is used to update / delete data

<form method="POST" action="alter_db.php">
 <section>Find a trade with ticket number :
            <input type="tickt" id="search_ticket" name="tickt" placeholder="  insert A ticket number">
            <input type="submit" id="Find_ticket" value="Find This Ticket">
 </section>
 <div class="table-wrapper">
     
    <table>
        <thead>
		   
            
                <tr>
				    <th>Ticket</th>
					<th>Open Time</th>
					<th>Type</th>
					<th>Size</th>
					<th>Item</th>
					<th>Open Price</th>
					<th>Stop Loss</th>
					<th>Take Profit</th>
					<th>Close Time</th>
					<th>Close Price</td>
					<th>Profit</th>
					<th>Update row</th>
					<th>Delete row</th>
				</tr>
        </thead>
        <tbody>
            <?php foreach ($positions as $pkey=>$pval)
				{
				 echo '<tr>
				       <input type="hidden" name-"id[]" value ="'.$pval['id'].'">
				       <td><input type="text" name-"ticket[]" value ="'.$pval['ticket'].'"></td>
					   <td style="width:12%"><input type="text" name-"o_time[]" value ="'.$pval['o_time'].'"></td>
					   <td><input type="text" name-"type[]" value ="'.$pval['type'].'"></td>
					   <td><input type="text" name-"size[]" value ="'.$pval['size'].'"></td>
					   <td><input type="text" name-"item[]" value ="'.$pval['item'].'"></td>
					   <td><input type="text" name-"o_price[]" value ="'.$pval['o_price'].'"></td>
					   <td><input type="text" name-"s_l[]" value ="'.$pval['s_l'].'"></td>
					   <td><input type="text" name-"t_p[]" value ="'.$pval['t_p'].'"></td>
					   <td style="width:12%"><input type="text" name-"c_time[]" value ="'.$pval['c_time'].'"></td>
					   <td><input type="text" name-"c_price[]" value ="'.$pval['c_price'].'"></td>
					   <td><input type="text" name-"id[]" value ="'.$pval['profit'].'"></td>
					   <td><input type="checkbox" name="update[]"></td>
					   <td><input type="checkbox" name="delete[]"></td>
					   </tr>';
			    }
			?>
           
        </tbody>
    </table>
</div>
	<input type="submit" id="update" class="ud" value="Update selected rows" name="update">
	<input type="submit" id="delete" class="ud" value="Delete selected rows" name="delete">

</form>

And Here is how it looks

I an trying to create an option to type a ticket number and that the input field containing it will have a yellow background.
I tried this in JQUERY:

$("#Find_ticket").click(function(){
		   event.preventDefault();
		   var wanted = $("#search_ticket").val();
		   $(".table-wrapper").find(wanted).this.parent().css({"background": "yellow"});
		 });

I inserted the value in a variable
I want to search the value in the div containing it and give the input field containing it a yellow background.
It doesn’t work. What did I do wrong ?

(step 2 will be to scroll down if the ticket is close to the bottom, but first I need the yellow background)

THanks

[m3g4p0p]

@erezvol

$(".table-wrapper").find(wanted).this.parent().css({"background": "yellow"});

Hi @erezvol, so the value of your wanted variable will contain a string such as 12345, so you’re not likely to find() anything unless the user happens to enter a valid CSS selector here; and if you do find an element, it won’t have a this property (you might also want to check the console for errors BTW).

What you might do though is filter() your input elements, which allows passing a function for more involved checks:

var wanted = $('#search_ticket').val()

$('input').filter(function () {
  return this.value === wanted
}).parent().css({ background: 'yellow' })

[erezvol]

@m3g4p0p

var wanted = $('#search_ticket').val()

$('input').filter(function () {
  return this.value === wanted
}).parent().css({ background: 'yellow' })

Thanks m3g4p0p, but it chanches the background color of the search span.
I want to change the input field where the searched value is to make is noticeable for users

[m3g4p0p]

@erezvol

I want to change the input field where the searched value is to make is noticeable for users

You can use a more specific selector for those fields then; e.g. give them a ticket-number class and then query for $('.ticket-number'), or maybe just $('[name="ticket[]"]').

PS: Just noticed there’s a small issue with your markup here, you’re using a hyphen instead of an equal sign for the name attributes inside the table.