Question

我有产品表，它按产品ID加载不同的html页面。现在我想突出显示所选的（由元素选择）表格行。我正在使用一个函数来知道它有什么唯一ID。

 function Tooted(str) {
        var url="tooted.php?q="+str;
        if (str == "") {
            $("#txtHint").html("");
            return;
        } else {
            $("#txtHint").load(url);
        }



    $("#tellimus"+str).on('click',function(){
        if(str!=str){

        $(this).css({'background-color':'white'})
    }
    else{$(this).css({'background-color':'#6495ED'})}
        });

    }

它会像这样打开所选的html页面

<td>'.$r["id"].' <a id="link" nohref style="cursor:pointer;" onClick="Tooted(\''.$r["id"].'\')">Tooted</a></td>

我按照这样的唯一ID选择每一行：

<tr class="tellimuz" id=tellimus'.$r["id"].'>

完整的php / html代码：

$out .= "\n".'<tr class="tellimuz" id=tellimus'.$r["id"].'>
    <td>'.$r["id"].' <a id="link" nohref style="cursor:pointer;" onClick="Tooted(\''.$r["id"].'\')">Tooted</a></td>
    <td>'.$r["kp"].'</td>
    </tr>';

现在正如我所说，我想强调表格行按功能选择的内容。 背景颜色更改有效，但我只想突出显示所选行。 Atm每个选定的行都会更改背景颜色，并且当未选择时将剂量更改为白色

Answer 1

您似乎错过了javascript中“Tooted”功能的结束括号。

每个锚标记都有相同的ID（“链接”）。

您的代码中有(str!=str)。你将变量与自身进行比较，总是等于它自己，所以这里始终是总是 false

您的功能实际在做什么：

当您点击某个链接时，它会以HTML格式加载到您的#txtHint元素中。然后，您将另一个函数绑定到整个行的click事件，从而基本上切换背景颜色。

function Tooted(str) {
  var url="tooted.php?q="+str;
  if (str == "") {
    $("#txtHint").html("");
    return;
  } else {
    $("#txtHint").load(url);
  }

  $("#tellimus"+str).on('click',function(){
    if(str!=str){
      $(this).css({'background-color':'white'})
    } else {
      $(this).css({'background-color':'#6495ED'})}
    });
  }
}

我想要做的是将一行更改为突出显示的背景颜色，其余部分更改为白色。您不需要像上面那样使用单元素切换，而是需要将其中一个更改为突出显示的颜色，其余颜色更改为白色。

function Tooted(str){
  var url = "tooted.php?q="+str;
  if (str == "") {
    $("#txtHint").html("");
    return;
  } else {
    $("#txtHint").load(url);
  }

  //no need to get fancy with IDs, just get closest parent row
  $(this).closest("tr")
    //change this row to your highlight color
    .css({'background-color':'#6495ED'})
    //then get all the other rows and make them white
    .siblings("tr").css({'background-color':'white'})
}

如果我错了，请澄清你的问题。您呈现的HTML将非常有用。

如何仅更改选定的元素css

1 个答案: