通过 AJAX jquery 更改表格背景颜色？答案

【问题标题】：Changing table background color through AJAX jquery?通过 AJAX jquery 更改表格背景颜色？
【发布时间】：2013-04-05 10:00:00
【问题描述】：

场景：当我的网页加载自动搜索时，用户已输入单元格并具有价值。如果已输入表格背景颜色为红色，否则为绿色。

假设此表尚未输入。表格背景绿色是这样的

及表格源代码：

  <table width="1023" height="200" border="1">
      <tr>
        <th colspan="2" scope="col">A1</th>
        <th colspan="2" scope="col">A2</th>
        <th colspan="2" scope="col">A3</th>
       </tr>
    <tr>
        <td bgcolor="#00CC00"><div class="data" align="center" value="A1.4"><input type="button" onclick="popup_window_show('#sample', { pos : 'tag-right-down',   parent : this, width : '270px' });setvalue(this.value);" value="A1.4" /></td>
        <td bgcolor="#00CC00"><div class="data" align="center" value="A1.8"><input type="button" onclick="popup_window_show('#sample', { pos : 'tag-right-down',   parent : this, width : '270px' });setvalue(this.value);" value="A1.8" /></td>
        <td bgcolor="#00CC00"><div class="data" align="center" value="A2.4"><input type="button" onclick="popup_window_show('#sample', { pos : 'tag-right-down',   parent : this, width : '270px' });setvalue(this.value);" value="A2.4" /></td>
        <td bgcolor="#00CC00"><div class="data" align="center" value="A2.8"><input type="button" onclick="popup_window_show('#sample', { pos : 'tag-right-down',   parent : this, width : '270px' });setvalue(this.value);" value="A2.8" /></td>
        <td bgcolor="#00CC00"><div class="data" align="center" value="A3.4"><input type="button" onclick="popup_window_show('#sample', { pos : 'tag-right-down',   parent : this, width : '270px' });setvalue(this.value);" value="A3.4" /></td>
        <td bgcolor="#00CC00"><div class="data" align="center" value="A3.8"><input type="button" onclick="popup_window_show('#sample', { pos : 'tag-right-down',   parent : this, width : '270px' });setvalue(this.value);" value="A3.8" /></td>
    </tr>
    </table>

我使用 ajax.jquery 像这样检查单元格值

 var htmlobjek;
     $(document).ready(function () {
         var i = $("td").find("td.data").val();
          $.ajax({
                 url: "cek.php",
                 data: "i",
                 cache: false,
                 success: function (data) {
                     $("#cek").val(data);
                 }
             });     
     });

当然在cek.php中会这样

<?php
$posisi =  $_POST[i];

$val = mssql_num_rows(mssql_query("SELECT*FROM tblTrnProduct WHERE Posisi = '$posisi'"));

echo"$val";
?>

获取 cek.php 的输出。我用了一个小技巧。我做了一个

<input id="cek" name="cek" type="text" />

作为一面镜子。

之后我用这个 javascript 操作表格背景

 $(document).ready(function () {
         $("#cek").change(function () {
             var cek = $("#cek").val();
                 if (cek === 0) {
                     $("td").style("bgcolor", "#00CC00");//green
                     else {
                         $("td").style("bgcolor", "#FF0000");//red

                     }
                 }
            });
     });

但用户通过弹出表单输入数据后没有任何反应。任何可以通过示例帮助解决此问题的想法都将不胜感激。

【问题讨论】：

使用 javascript 以编程方式更改值时不会触发更改事件。您必须自己触发更改。
要非常小心！ 您的代码容易受到 SQL 注入的攻击。您不应将从用户处获得的值直接用于 SQL 语句 - 您应始终首先对数据进行转义/清理。
@Lix tq 寻求建议。这只是为了说明这一点..c'z我的英语仍然很弱..:)
好的答案我可以改变背景颜色。但是我在记录静态值时遇到了问题。像这样
我尝试用这个 var i = $("td").find("td.data").val();但是这个函数没有那个值..有什么问题...？
这里的i 是$posisi = $_POST[i]; 是什么？

标签： php javascript jquery html ajax

【解决方案1】：

if-else 上的括号不对，好像 else 在 if 里面：

if (cek === 0) {
    $("td").style("bgcolor", "#00CC00");//green
         else {
           $("td").style("bgcolor", "#FF0000");//red
          }
 }

我想你是说

if (cek === 0) {
     $("td").style("bgcolor", "#00CC00");//green
 } else {
     $("td").style("bgcolor", "#FF0000");//red
 }

【讨论】：

什么都没有发生 c'z 获取值只是 0 而已。就像什么都没发生一样。
代替 if (cek === 0)，试试 if (cek == "0")

【解决方案2】：

真正的解决方案

script type="text/javascript">
    var htmlobjek;
     $(document).ready(function () {
    var ajaxCall = $.ajax({
        url: "cek.php",
        type:'POST',
        data: $('#data').serialize(),
        cache: false,
    }).done( function (data) {
        $("#cek").val(data);
    }).fail( function () {
        alert('I can not send ajax here');
    });

    ajaxCall.done( function (data) {
        var k = $("#cek").val();
        if(k == 0){
            $(".dataa").css("background-color", "#00CC00");//green
        }
        else {
            $(".dataa").css("background-color", "#FF0000");//red
        }
    });
    });
    </script>

【讨论】：

【解决方案3】：

 You can try this,

  if (cek === 0) {
    $("td").css("backgroundColor", "#00CC00");//green
  } else {
    $("td").css("backgroundColor", "#FF0000");//red
  }

【讨论】：

【解决方案4】：

为 CSS 背景属性包含 jquery.color.js。如果不写新类并申请TR addClass("newclass")

【讨论】：