Question

我有一个html文件，其中包含一些行，其中包含一些行n列。每行包含一个按钮，它有一些功能。首先，它必须将数据连续提交到php文件，该文件不打印任何内容。然后按钮必须在其相应行的第5列中更改其文本和文本。按钮的更改文本效果运行良好。但是第5列的更改文本效果是错误的。只有第一行第5列的文字正在改变，无论你点击哪个按钮..任何人都可以解决这个问题吗？

提前致谢：）

blasteralfred

<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style>  
.style1 {  
    background-color: #c3d9ff;  
    font-family:arial,sans-serif;  
}  
.style2 {  
    text-align: center;  
    font-weight: bold;  
}  
.style3 {  
    background-color: #FFFFFF;  
    font-family:arial,sans-serif;  
    text-align: center;  
    font-weight: bold;  
}  
body {  
font-family:Verdana, Arial, Helvetica, sans-serif;  
font-size:15px;  
background-color: ;  
}  
.delete_button {  
font-weight:bold;  
float:right;  
}  
</style>

<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript">  
$(function()  
{  
    $(".delete_button").click(function()  
    {  
    var id = $(this).attr("id");  
    var dataString = 'id='+ id ;  
    var parent = $(this).parent().parent();  
    $.ajax({  
        type: "POST",  
        url: "del.php",  
        data: dataString,  
        cache: false,  
        success: function()  
        {  
            if(id % 2)  
            {  
                parent.fadeOut('fast', function() {$(this).fadeOut();$(this).fadeIn();});  
            }  
            else  
            {  
                parent.fadeOut('fast', function()   {$(this).fadeOut();$(this).fadeIn();});  
            }  
        }  
    });  
    return false;  
    }  
);});  
$(document).ready(function() {  
  $('.delete_button').click(function() {  
    $(this).text($(this).text() == 'Inactivate' ? 'Activate' : 'Inactivate');  
    $("#clickme2").text($("#clickme2").text() == 'Inactive' ? 'Active' : 'Inactive');  
    return false;  
});  
});  
</script>
</head>  
<body>  
<table style="width: 90%" align="center" class="style1">
<tr>  
        <td colspan="7" class="style2">MANAGER</td>  
    </tr>  
    <tr>  
        <td class="style3" style="width: 139px">column1</td>  
        <td class="style3" style="width: 139px">column2</td>  
        <td class="style3" style="width: 139px">column3</td>  
        <td class="style3" style="width: 139px">column4</td>  
        <td class="style3" style="width: 139px">column5</td>  
        <td class="style3" style="width: 144px">column6</td>  
        <td class="style3" style="">Action</td>  
    </tr>  
        <tr>  
        <td class="style3" style="width: 139px">msg1</td>  
        <td class="style3" style="width: 139px">msg2</td>  
        <td class="style3" style="width: 139px">msg3</td>  
        <td class="style3" style="width: 139px">msg4</td>  
        <td div id="clickme2" class="style3" style="width: 139px">Inactive</td>  
        <td class="style3" style="width: 144px">msg6</td>  
        <td  style="width: ">  
            <button class="delete_button" style="width:80px;height:">Activate</button>  
        </td>  
    </tr>  
    <tr>  
        <td class="style3" style="width: 139px">msg1</td>  
        <td class="style3" style="width: 139px">msg2</td>  
        <td class="style3" style="width: 139px">msg3</td>  
        <td class="style3" style="width: 139px">msg4</td>  
        <td div id="clickme2" class="style3" style="width: 139px">Inactive</td>  
        <td class="style3" style="width: 144px">msg6</td>  
        <td  style="width: ">  
            <button class="delete_button" style="width:80px;height:">Activate</button>  
        </td>  
    </tr>  
    <tr>  
        <td class="style3" style="width: 139px">msg1</td>  
        <td class="style3" style="width: 139px">msg2</td>  
        <td class="style3" style="width: 139px">msg3</td>  
        <td class="style3" style="width: 139px">msg4</td>  
        <td div id="clickme2" class="style3" style="width: 139px">Inactive</td>  
        <td class="style3" style="width: 144px">msg6</td>  
        <td  style="width: ">  
            <button class="delete_button" style="width:80px;height:">Activate</button>  
        </td>  
    </tr>  
    <tr>  
        <td class="style3" style="width: 139px">msg1</td>  
        <td class="style3" style="width: 139px">msg2</td>  
        <td class="style3" style="width: 139px">msg3</td>  
        <td class="style3" style="width: 139px">msg4</td>  
        <td div id="clickme2" class="style3" style="width: 139px">Inactive</td>  
        <td class="style3" style="width: 144px">msg6</td>  
        <td  style="width: ">  
            <button class="delete_button" style="width:80px;height:">Activate</button>  
        </td>  
    </tr>  
    <tr>  
        <td class="style3" style="width: 139px">msg1</td>  
        <td class="style3" style="width: 139px">msg2</td>  
        <td class="style3" style="width: 139px">msg3</td>  
        <td class="style3" style="width: 139px">msg4</td>  
        <td div id="clickme2" class="style3" style="width: 139px">Inactive</td>  
        <td class="style3" style="width: 144px">msg6</td>  
        <td  style="width: ">  
            <button class="delete_button" style="width:80px;height:">Activate</button>  
        </td>  
    </tr>  
    <tr>  
        <td class="style3" style="width: 139px">msg1</td>  
        <td class="style3" style="width: 139px">msg2</td>  
        <td class="style3" style="width: 139px">msg3</td>  
        <td class="style3" style="width: 139px">msg4</td>  
        <td div id="clickme2" class="style3" style="width: 139px">Inactive</td>  
        <td class="style3" style="width: 144px">msg6</td>  
        <td  style="width: ">  
            <button class="delete_button" style="width:80px;height:">Activate</button>  
        </td>  
    </tr>
</table>
</body>

Answer 1

您多次使用ID（这是无效的，HTML规范中不允许）。当你瞄准这个时，你总是得到第一个。

使用clickme2作为类而不是id，并从点击处理程序中将其作为目标

$(this).closest('tr').find('.clickme2').text(...);

此外，请删除td代码中的 div 属性，因为该属性也不存在。

http://www.jsfiddle.net/gaby/23KEW/

的示例

Answer 2

你的javascript错误

$(document).ready(function() {
$('.delete_button').click(function() {
    $(this).text($(this).text() == 'Inactivate' ? 'Activate' : 'Inactivate');
    $("#clickme2").text($("#clickme2").text() == 'Inactive' ? 'Active' : 'Inactive');/*you are giving same id to all rows in 5 th column and selecting it*/
    return false;
    });
});

您应该从此处删除ID

 <td div id="clickme2" class="style3" style="width: 139px">Inactive</td>

并将您的javascript更改为

然后在youjavascript中

    $(document).ready(function() {
$('.delete_button').click(function() {
    $(this).text($(this).text() == 'Inactivate' ? 'Activate' : 'Inactivate');
        $(this).closest("td").prev().prev().text($(this).text() == 'Inactivate' ? 'Activate' : 'Inactivate');
    return false;
    });
});

但我不确定ajax请求

Jquery动态文本效果/类问题

2 个答案: