通过AJAX的jQuery更改表格的背景颜色？ [英] Changing table background color through AJAX jquery?

问题描述

方案：：当我的网页加载自动搜索与细胞已经输入的用户，并具有价值。如果已经输入表格的背景颜色将红色东西会绿色。

Scenario: When my web page load automatically search with cell has been input by user and have value. If has been input the table background color will red else will green.

假设这个表没有输入呢。该表背景绿色像这样

Assume this table has not been input yet. The table background green like this

和表源码 - code：

and source-code of table:

  <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检查这样的单元格的值

i use ajax.jquery to check cell value like this

 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会喜欢这个

of course in cek.php will like this

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

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

echo"$val";
?>

要得到cek.php的输出。我用一个小窍门。 我做了

to get the output of cek.php. I use a little trick. I make a

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

如镜。

在这之后我操控台的背景，这个JavaScript

After that I manipulate table background with this 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

                     }
                 }
            });
     });

但没有发生用户输入后的数据通过弹出的形式。任何想法，可以帮助这个问题用一个例子会越来越AP preciate。

but nothing happen after user input the data by popup form. Any idea that can help this problem with an example will more appreciate.

推荐答案

真正的解决办法

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>

这篇关于通过AJAX的jQuery更改表格的背景颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！