In this article we will show you the solution of jQuery select by name, here we defined table with two row, two columns. In each column we specified name attribute with different values for select particular cells with the help of css() method.
The css() method sets or returns one or more style properties for the selected elements. It returns the specified CSS property value of the FIRST matched element.
Step By Step Guide On jQuery Select By Name :-
In html we defined h1 element, button ‘Click Here’ and table with two rows, two columns.
In script block we defined ready() method which is automatically starts loading code of within this function when this program opened on browser.
There we appended click() method on button and within this we specified table column ‘td’ element with name attribute, value for select that cell then which is appends with css() method for change that cells background color and color of font.
<!DOCTYPE html>
<html>
<head>
<title>Select by name</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$('td[name="c4"]').css("color","white");
$('td[name="c4"]').css("background-color","green");
$('td[name="c1"]').css("color","white");
$('td[name="c1"]').css("background-color","blue");
})
});
</script>
<body>
<h1>Select column by Name attribute</h1>
<button>Click Here</button>
<table border="1">
<tr>
<td name="c1">Cell 1</td>
<td name="c2">Cell 2</td>
</tr>
<tr>
<td name="c3">Cell 3</td>
<td name="c4">Cell 4</td>
</tr>
</table>
</body>
</head>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Here we imported open source jquery library support file which is needed for coding using jquery in program.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- We displayed heading ‘Select column by Name attribute’ using h1 element, button ‘Click Here’ and table with border ‘1’. Table contains two rows and two columns ‘Cell 1, Cell 2, Cell 3, Cell 4’.
- Table columns defined with name attribute with different values ‘c1,c2,c3,c4’.
- In script we defined ready() method within that we appended click() method on button ‘Click Here’. There we specified cell 4 and 1 by ‘td[name="c4"]’ line of code. Here td-refers overall td elements, name=”c4”-refers particular cell of which have that value on it.
- Then we needs to apply some style on that cells for user identification of selected element from table. By using css() we sets that cell font color to ‘white’ and background sets to different colors for cell 1 and cell 4.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to select element by using name in jquery.
Before execution of program we needs to confirm internet connection because then only that jquery file will supports defined jquery codes without error.
When we executes program on browser we can see table with two columns, two rows with button ‘Click Here’.
Now user needs to clicks on it then we can see css applied cells which help’s user verification of selected element in webpage.
I hope this article on jQuery select by name helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
