In this article we will show you the solution of jQuery set attribute value, as we know for sets attribute we needs to use attr() method by using this we can set any type of attribute on any html elements.
Here we defined table three rows, two columns then using attr() method we sets attribute for table and if you wants set any other attribute for table add modify it accordingly.
Step By Step Guide On jQuery Set Attribute Value :-
In html we defined table element with three rows, two columns and button ‘Set Attribute’ helps us for proceeds any process.
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 ‘Set Attribute’ and within this we specified table then which is appends with attr() method for sets border, width attributes with respected values ‘1,60%’.
<!DOCTYPE html>
<html>
<head>
<title>Set attribute value</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#sa").click(function(){
$('table').attr("border","1");
$('table').attr("width","60%");
})
});
</script>
<body>
<button id="sa">Set Attribute</button>
<br><br>
<table>
<tr>
<th>Coulmn1</th>
<th>Coulmn2</th>
</tr>
<tr>
<td>Cells</td>
<td>Cells</td>
</tr>
<tr>
<td>Cells</td>
<td>Cells</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 defined button ‘Set Attribute’ with id attribute ‘sa’ for proceeds defined process when user clicks on it and table with three rows and two columns.
- In script we defined ready() method within that we appended click() method on button ‘Set Attribute’ by id attribute ‘sa’.
- There we specified table element by tag name ‘table’ then which is appends with attr() method. Here first we sets border property or attribute value to ‘1’ and width attribute value set to ‘60%’.
- 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 set attribute value 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 button ‘Set Attribute’ and table data without structure now user needs to clicks on button then we can see table with border and each columns have 60% width of browsers page.
I hope this article on jQuery set attribute value helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
