Changing table background color through AJAX jquery?

Question

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

enter image description here

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.

The change event is not triggered when the value is changed programatically with javascript. You would have to trigger a change yourself. — adeneo
– adeneo, Commented Apr 5, 2013 at 10:01
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
– 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
– 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
– Andriansyah, Commented Apr 9, 2013 at 2:47

Fiona - myaccessible.website · Accepted Answer · 2013-04-05 10:02:39Z

1

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
 }

answered Apr 5, 2013 at 10:02

Fiona - myaccessible.website

15k17 gold badges85 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andriansyah Over a year ago

nothing happen c'z the get value just 0 only. like nothing happen.

Fiona - myaccessible.website Over a year ago

Instead of if (cek === 0), try if (cek == "0")

Andriansyah · Accepted Answer · 2013-04-15 06:56:31Z

1

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>

answered Apr 15, 2013 at 6:56

Andriansyah

2091 gold badge2 silver badges12 bronze badges

Comments

Shijin TR · Accepted Answer · 2013-04-05 10:06:43Z

0

 You can try this,

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

answered Apr 5, 2013 at 10:06

Shijin TR

7,80911 gold badges64 silver badges126 bronze badges

Comments

Egglabs · Accepted Answer · 2013-04-05 10:09:18Z

0

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

answered Apr 5, 2013 at 10:09

Egglabs

3,19610 gold badges35 silver badges48 bronze badges

Collectives™ on Stack Overflow

Changing table background color through AJAX jquery?

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related