Question

我对JQuery编程很陌生，需要一些帮助！

我有一个ASP.NET数据透视表，我在该表的单元格中有#re v arious值1,2,3或4.无论选择哪个值，都会将单元格转换为四种颜色之一。现在代码在firebug中工作，但是当我把它放在我的页面标题中的标签中时，它不起作用。

我做错了什么？

<script type="text/javascript" src="../../../Scripts/jquery-1.6.1.min.js">



    $(document).ready(function () {

        $(".myGridView1 tr").each(function () {



            $("td").filter(function () { return $.text([this]) == '1'; }).css('background', 'green');

            $("td").filter(function () { return $.text([this]) == '2'; }).css('background', 'orange');

            $("td").filter(function () { return $.text([this]) == '3'; }).css('background', 'red');

            $("td").filter(function () { return $.text([this]) == '4'; }).css('background', 'blue');

        });

    });



</script>

Answer 1

每个脚本都需要自己的标记，如下所示：

<script type="text/javascript" src="../../../Scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".myGridView1 tr").each(function() {
        $("td").filter(function() {
            return $.text([this]) == '1';
        }).css('background', 'green');

        $("td").filter(function() {
            return $.text([this]) == '2';
        }).css('background', 'orange');

        $("td").filter(function() {
            return $.text([this]) == '3';
        }).css('background', 'red');

        $("td").filter(function() {
            return $.text([this]) == '4';
        }).css('background', 'blue');

    });
});
</script>

原因是Javascript被加载到指定标签的html中（如果你已经指定了一个URL），并且据我所知，将覆盖当前脚本标签内的内容。因此，如果您在<script>标记内有任何内容并设置了URL，则会覆盖它，因此不会执行。

此外，它是Javascript编程，而不是jQuery编程。 jQuery是一个与Javascript一起使用的库。

Answer 2

如果script属性存在，则会忽略src的内容。换句话说，您需要两个script标记：一个包含jQuery，另一个包含代码。你还需要做更多的工作：

$(function () {
   $(".myGridView1 tr td:contains(1)").css('background', 'green');
...
});

你可以进一步巩固它。只是几点说明：

$.text([this])与$(this).text()没有太大区别。后者是首选。

您的.each毫无意义，因为$("td")选择器会对整个文档进行操作。如果您真的想使用.each选择器作为上下文，则可以执行$("td", this)。不过，我认为甚至不必使用.each。这只是一个额外的函数调用。

最后，您可以使用:contains选择器来尝试使用.filter。我没有看到使用.filter而不是选择器的理由，除非.filter方法极其复杂或者您想将其用于链接。

Answer 3

您不能在包含页面代码的同一标记中包含外部脚本。它需要是一个单独的空标记：

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script>
   // my script
</script>

此外，还有一些注意事项：

.each()函数在代码中没有做任何事情，除了运行过滤函数太多次。对于每个tr，您正在查看每个 td，而不仅仅是当前行中的 .each()。如果您取出.css()，代码仍然有效：

演示：http://jsfiddle.net/jtbowden/dgswh/

其次，不要过滤，只需将功能添加到var colors = {'1': 'green', '2': 'orange', '3': 'red', '4': 'blue' }; $("td").css('background-color', function(index, value) { var txt = $(this).text(); if(colors.hasOwnProperty(txt)) { return colors[txt]; } return value; });来电：

td

演示：http://jsfiddle.net/jtbowden/dgswh/2/

这会将您的代码减少为单个调用，而不是4（并且每个$(".myGridView1 td").css('background-color', function(index, value) { ... });只运行一次）。如果要将其限制为该表，请更改选择器：

td

跟进

要在更改颜色后从$("td").css('background-color', function(index, value) { var txt = $(this).text(); $(this).text(""); // ADD THIS LINE if(colors.hasOwnProperty(txt)) { return colors[txt]; } return value; });删除文字，您可以执行以下操作：

td

如果您只想删除匹配的$("td").css('background-color', function(index, value) { var txt = $(this).text(); if(colors.hasOwnProperty(txt)) { $(this).text(""); // MOVE TO HERE return colors[txt]; } return value; });文本，请移动以下行：

min-height

重要的是要注意，如果没有某些样式，如果清空表格单元格，它可能会折叠为零宽度，或者如果行上的所有单元格都为空，则该行可能会折叠到零高度。如果是这种情况，请在CSS中为min-width添加td和$(this).text("")定义，或将$(this).html(' ')更改为td

演示：http://jsfiddle.net/jtbowden/dgswh/5/

如果您想保留该号码，但不能看到该号码，则可以使用隐藏或隐藏的div包裹$(this).wrapInner("<div style='visibility:hidden'>");的内容：

$(this).wrapInner("<div style='display:none'>");

或者：

{{1}}

演示：http://jsfiddle.net/jtbowden/dgswh/6/

Answer 4

假设我们不是在谈论一个不正确的脚本标签，这是一个解决方案：

的CSS：

.td1 {background-color:green}
.td2 {background-color:orange}
etc



$(".myGridView1 td").each(function() {
   $(this).addClass('td' + $(this).text());

 });

Answer 5

<script type="text/javascript" src="../../../Scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript">

    $(function(){

        $(".myGridView1 td").each(function () {

            var that = $(this)

            switch( that.text() ){

                  case '1': that.css('background', 'green');
                  break;

                  case '2': that.css('background', 'orange');
                  break;

                  case '3': that.css('background', 'red');
                  break;

                  case '4': that.css('background', 'blue');
                  break;
            } 

        });

    });
</script>

只需2美分。你应该避免使用新的jQuery对象（少$更好）并且过滤效率也非常低。这样每个jQuery对象创建一次，每个函数运行一次。

Jquery在firebug中工作，但不在页面中

5 个答案: