0

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

我有一个 ASP.NET 数据透视表，并且该表的单元格中有一个 #revarious 值 1、2、3 或 4。无论选择哪个值，都会将单元格变为四种颜色之一。现在代码在萤火虫中工作但不起作用，当我把它放在我的页面标题的标签中时。

我究竟做错了什么？

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

5 回答 5

2

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

<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 一起使用的库。

于 2012-05-07T20:34:16.157 回答
2

如果属性存在，script则忽略a 的内容。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方法非常复杂或者您想将其用于链接。

于 2012-05-07T20:41:25.417 回答
1

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

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

另外，一些注意事项：

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

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

其次，不用过滤，只需将函数添加到您的.css()调用中：

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;
});

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

这将您的代码减少到一个调用，而不是 4 个（并且每个调用只运行一次td）。如果您想将其限制在该表中，请更改选择器：

$(".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;
});

如果您只想删除tds 匹配的文本，请移动该行：

$("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;
});

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

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

如果你想保留数字，但不可见，你可以td用 hidden 或 invisible包装 的内容div：

$(this).wrapInner("<div style='visibility:hidden'>");

或者：

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

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

于 2012-05-07T21:13:56.623 回答
0

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

CSS：

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



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

 });
于 2012-05-07T20:43:03.160 回答
0 
<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 对象创建一次，每个函数运行一次。

于 2012-05-07T20:49:17.720 回答