Changing JavaScript code to jQuery of my own script

Question

I need a help on changing the JavaScript code to jQuery of my own code.

TASK:

When I click the '+' button on the tree, it shows/adds a new row to the table also the button changes to '-'(minus). After that, again I click on the minus(-) button, it hides the row.

The above task is done in javascript. I need to convert it to jQuery. Is it possible? If yes means, please help me. Thanks in advance.

The code is as follows:

<html>

<head>
    <title>Appending table row in a table</title>
    <script language = "javascript">
        function changeImage(that,x)
        {
    var clickedrow = document.getElementById("append"+x);
    var subrow = document.getElementById("append"+x+"a");
            var table = document.getElementById("mytable");
            if(that.src === "http://renko-server/sample/arun/jquery/images/plus.gif")
            { 
        that.src = "http://renko-server/sample/arun/jquery/images/minus.gif";         
        if(subrow)
                {

        subrow.style.display="";
                }
                else
                {

                    subrow = table.insertRow(clickedrow.rowIndex+1);
        subrow.id="append"+x+"a";
            var cell1 = subrow.insertCell(0);
            var cell2 = subrow.insertCell(1);
            var cell3 = subrow.insertCell(2);
            cell1.innerHTML = "";
            cell2.innerHTML = "Kumar";
            cell3.innerHTML = "Madurai";
                }
            }
    else
    {
        that.src = "http://renko-server/sample/arun/jquery/images/plus.gif";
        subrow.style.display="none";
    }
        }
    </script>
</head>

<body>
    <table id="mytable" class="appendtable">
        <tr><td></td><td><b>Name</b></td><td><b>Location</b></td></tr>
        <tr id="append1"><td><img id="plus1" onclick="javascript:changeImage(this,1);" src="http://renko-server/sample/arun/jquery/images/plus.gif" / ></td><td>Arun</td><td>Sivakasi</td></tr>

        <tr id="append2"><td><img onclick="javascript:changeImage(this,2);" id="plus2" src="http://renko-server/sample/arun/jquery/images/plus.gif"/></td><td>Raj</td><td>Kovai</td></tr>

        <tr id="append3"><td><img id="plus3" src="http://renko-server/sample/arun/jquery/images/plus.gif" onclick="javascript:changeImage(this,3);"/></td><td>Jerome</td><td>Bangalore</td></tr>

    </table>
</body>
</html>

Have you considered using knockout.js? That will free you from writing complex code like this but it has a learning curve. — AlexStack
– AlexStack, Commented Sep 19, 2015 at 9:14
You go to this website: jsbin.com and put some HTML, CSS, JS that roughly present a simplified version of your problem in a live editable environment. People who want to answer it can change your code and make a new version and post the link back to you. Stackoverflow also has a live code feature that you can use in the question. — AlexStack
– AlexStack, Commented Sep 19, 2015 at 9:19

Umesh Sehta · Accepted Answer · 2015-09-19 09:40:12Z

change you html like this:-

<table id="mytable" class="appendtable">
    <tr><td></td><td><b>Name</b></td><td><b>Location</b></td></tr>
    <tr id="append1"><td><img id="plus1" onclick="changeImage(this);" src="http://renko-server/sample/arun/jquery/images/plus.gif" /> ></td><td>Arun</td><td>Sivakasi</td></tr>
 //                                                            ^^^ this is change
    <tr id="append2"><td><img onclick="changeImage(this);" id="plus2" src="http://renko-server/sample/arun/jquery/images/plus.gif" /></td><td>Raj</td><td>Kovai</td></tr>
    <tr id="append3"><td><img id="plus3" src="http://renko-server/sample/arun/jquery/images/plus.gif" onclick="javascript:changeImage(this);" /></td><td>Jerome</td><td>Bangalore</td></tr>
</table>

and your jquery function is:-

function changeImage(that) {
var clickedrow = $(that);
var subrow = $('#' + clickedrow.attr('id') + 'a');
var table = $("#mytable");
if (clickedrow.attr('src') === "http://renko-server/sample/arun/jquery/images/plus.gif") {
    clickedrow.attr('src', "http://renko-server/sample/arun/jquery/images/minus.gif");
    if (subrow.length) {
        subrow.show();
    }
    else {
        subrow = $('<tr><td></td><td>Kumar</td><td>Madurai</td></tr>').insertAfter(clickedrow.parents('tr'));
    }
}
else {
    clickedrow.attr('src', "http://renko-server/sample/arun/jquery/images/plus.gif");
    subrow.hide();
  }
}

Demo

Or if you don't want to use onclick direct on image Try this

Collectives™ on Stack Overflow

Changing JavaScript code to jQuery of my own script

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related