Question

我需要帮助将我自己的代码的 JavaScript代码更改为 jQuery 。

TASK：

当我点击＆＃39; +＆＃39;在树上的按钮，它会向表格显示/添加一个新行，按钮也会变为＆＃39; - ＆＃39;（减号）。之后，再次点击减号（ - ）按钮，它会隐藏行。

上述任务是在javascript中完成的。我需要将其转换为jQuery。可能吗？如果是的话，请帮助我。提前谢谢。

代码如下：

<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>

Answer 1

像这样改变你的HTML： -

<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>

你的jquery函数是： -

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

或者，如果您不想在图像Try this

上使用onclick direct

将JavaScript代码更改为我自己脚本的jQuery

1 个答案: