Wednesday, February 27, 2019

jQuery Learning with Real Development Tasks. Task-8 Source code

You can find here source code for jQuery Practice with Real Task- Part 8

YouTube link for this task video is given below :

TASK- 8Check/Uncheck Check Boxes on Check/Uncheck of a checkbox

Preview is:

CODE:

<!DOCTYPE html>
<html>
<head>
    <title>Task-8: Check All Check Boxes on Click of a Check Box</title>
    <meta charset="utf-8" />
    <script src="../Scripts/jquery-3.3.1.js"></script>
</head>
<body>
    <div>
        <input type="checkbox" id="chkSelectAll" />Select All <br />
        <input type="checkbox" class="chk" /> Option-1 <br />
        <input type="checkbox" class="chk" /> Option-2 <br />
        <input type="checkbox" class="chk" /> Option-3 <br />
    </div>
    <script>
        $('#chkSelectAll').on('click', function () {
            if ($('#chkSelectAll').is(':checked')) // check that checkbox is checked or not
            {
                // code for, if checked
                $('.chk').prop('checked',true); // check all controls having class 'chk'
            }
            else
            {
                $('.chk').prop('checked', false);
            }
        });
    </script>
</body>

</html>

Happy coding.
Rudra Pratap Singh
Software Engineer

Saturday, February 23, 2019

jQuery Learning with Real Development Tasks. Task-7 Source code

In this blog you can find Source Code for jQuery Practice with real Task- Part -7.

I highly recommend to see Video of Part 6 to understand creation of controls dynamically using jQuery.

Links are :

Task-6 jQuery Practice: Add Textbox value to Drop Down List on click of a button
Task-7 jQuery Practice: Remove Dynamically Added Rows.

CLICK HERE to get Source Code of Task -6.

Code for Task 7 is given below: 

<body>
    <table style="border:1px solid blue;">
        <thead>
            <tr>
                <th>Name</th>
                <th>Mobile</th>
                <th><input type="button" value="ADD" id="btnADD"></th>
            </tr>
        </thead>
        <tbody id="tblEmpData">
            <tr id="TR_1">
                <td><input type="text" /></td>
                <td><input type="text" /></td>
                <td>&nbsp;</td>
            </tr>
        </tbody>
    </table>
    <script>
        $('#btnADD').click(function () {
            var TotalRowsinTBody = $('#tblEmpData >tr').length; // Total Existing Rows of Tbody
            var NewRowNumber = TotalRowsinTBody + 1; // code for id of new genrating rows
            var dynamicHtmlText = "<tr id='TR_" + NewRowNumber + "'>"; // here we have to give id
            dynamicHtmlText += "<td><input type='text' /></td>";// for 1st td
            dynamicHtmlText += "<td><input type='text' /></td>";// for 2nd td
            dynamicHtmlText += "<td><input type='button' value='Remove' onclick='DeleteRow(" + NewRowNumber + ")' ></td>";//
            dynamicHtmlText += "</tr>";
            // Add to tbody
            $('#tblEmpData').append(dynamicHtmlText);// append function will add this code to tbody
        });
        function DeleteRow(rowNumber)
        {
            $('#TR_' + rowNumber).remove(); // remove specified row.
        }
       
    </script>
</body>

Happy coding.
Rudra Pratap Singh
Software Engineer


jQuery Learning with Real Development Tasks. Task-6 Source code

You can find here source code for jQuery Practice with real Task- Part 6

YouTube link for this task video is given below :

Task-6 jQuery Practice: Add Textbox value to Drop Down List on click of a button

<!DOCTYPE html>
<html>
<head>
    <title>Task-6: Add Control Dynamically on Button Click</title>
    <meta charset="utf-8" />
    <script src="../Scripts/jquery-3.3.1.js"></script>
</head>
<body>
    <table style="border:1px solid blue;">
        <thead>
            <tr>
                <th>Name</th>
                <th>Mobile</th>
                <th><input type="button" value="ADD" id="btnADD"></th>
            </tr>
        </thead>
        <tbody id="tblEmpData">
            <tr>
                <td><input type="text" /></td>
                <td><input type="text" /></td>
                <td>&nbsp;</td>
            </tr>
        </tbody>
    </table>
    <script>
        $('#btnADD').click(function () {
            var dynamicHtmlText = "<tr>";
            dynamicHtmlText += "<td><input type='text' /></td>";// for 1st td
            dynamicHtmlText += "<td><input type='text' /></td>";// for 2nd td
            dynamicHtmlText += "<td>&nbsp;</td>";// for 3rd td
            dynamicHtmlText += "</tr>";
            // Add to tbody
            $('#tblEmpData').append(dynamicHtmlText);// append function will add this code to tbody
        });
    </script>
</body>
</html>


Happy coding.
Rudra Pratap Singh
Software Engineer

How to Get Organic Views on Your Channel/Content

 Hi Friends, This post will be very short and specific in the information.  If you are a content creator and want some help in getting organ...