通过AJAX jquery更改表格背景颜色?

时间:2013-04-05 10:00:01

标签: php javascript jquery html ajax

场景:当我的网页加载自动搜索时,用户已输入并具有值。如果已经输入,表背景颜色将为红色,否则将为绿色。

假设此表尚未输入。表背景绿色像这样

enter image description here

和表的源代码:

  <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

                     }
                 }
            });
     });

但用户通过弹出窗体输入数据后没有任何反应。通过示例可以帮助解决这个问题的任何想法都会更加欣赏。

4 个答案:

答案 0 :(得分: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
 }

答案 1 :(得分:1)

真实解决方案

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>

答案 2 :(得分:0)

 You can try this,

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

答案 3 :(得分:0)

为CSS背景属性包含jquery.color.js。如果没有编写新类并应用于TR addClass(“newclass”)