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

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>

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

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";
?>

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

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

as a mirror.

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

                     }
                 }
            });
     });

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

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

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>

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

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";
?>

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

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

as a mirror.

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

                     }
                 }
            });
     });

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

• php
• javascript
• jquery
• html
• ajax

• 1 The change event is not triggered when the value is changed programatically with javascript. You would have to trigger a change yourself. – adeneo Commented Apr 5, 2013 at 10:01
• 3 Be very careful! Your code is vulnerable to SQL injection. You shouldn't use values obtained from the user directly into an SQL statement - you should always escape/sanitize the data first. – Lix Commented Apr 5, 2013 at 10:03
• @Lix tq for advice. this just for example to make that clear..c'z i still weak in english ..:) – Andriansyah Commented Apr 6, 2013 at 1:25
• ok tq for the answer i can change background colour. But i got a problem to record static value. like this <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> i try to get record this value with this var i = $("td").find("td.data").val(); but this function doesn't got that value..what's the problem...? – Andriansyah Commented Apr 9, 2013 at 2:47
• what is i here $posisi = $_POST[i]; ? – NullPoiиteя Commented Apr 9, 2013 at 4:00

4 Answers 4

The brackets on your if-else aren't right, it's like the else is inside the if:

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

I think you mean

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

Real Solution

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>

 You can try this,

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

Include jquery.color.js for CSS background property. If not write new class and apply to TR addClass("newclass")