0

Hi i'm working on a Web System, i have a script which displays information about equipment inventory in a company. This information is stored in a Database (MySQL) and i'm using an HTML table to display the information previously stored in a PHP Variable which holds the query ResultSet and using a While Loop in order to retrieve every value and display it in the table.

Everything is perfect at this point.

But i have added a Search button, in which the user enters the Equipment's ID to search for. Then, if the ID exists, i want to set to RED the border of the row that has the ID just found.

The problem is that when i try to get the ID of the row to be changed i get null from the Javascript which changes the style attribute of that row.

I use a While Loop to generate the HTML table, and i just have declared 2 rows:

  • One for the header of the table
  • One to display the data.

I tried to dynamically generate IDs for the second row (for example, if there are 3 computers, then there'll be 3 rows with different IDs, and these IDs are based on the current ID stored in a variable called $c1).

Then i just call the JS sending a variable that has the ID to search for (this ID is supposed to be the same as the row's ID) and set the Background of that row to RED. But i got the error "Cannot read property 'style' of null". I've search and the only thing i've found is that i have to wait until the document loads and then call the Js in order to search the element, but it didn't work.

PHP

    <table>
            <tr>
                <td>ID del Equipo</td>
                <td>Tipo</td>
                <td>Marca</td>
                <td>Modelo</td>
                <td>Procesador</td>
                <td>Memoria Ram</td>
                <td>Detalles</td>
                <td>Area</td>
            </tr>
            <?php
            $i = 0;
            while ($i<$num) 
            {
                $c1 = mysql_result($result, $i, "ID del Equipo");
                $c2 = mysql_result($result, $i, "Tipo");
                $c3 = mysql_result($result, $i, "Marca");
                $c4 = mysql_result($result, $i, "Modelo");
                $c5 = mysql_result($result, $i, "Procesador");
                $c6 = mysql_result($result, $i, "Memoria RAM");
                $c7 = mysql_result($result, $i, "Detalles");
                $c8 = mysql_result($result, $i, "Area");
            ?>
            <tr id="<?php echo $c1; ?>">    
                <td><?php echo $c1;?></td>
                <td><?php echo $c2;?></td>
                <td><?php echo $c3;?></td>
                <td><?php echo $c4;?></td>
                <td><?php echo $c5;?></td>
                <td><?php echo $c6;?></td>
                <td><?php echo $c7;?></td>
                <td><?php echo $c8;?></td>
            </tr>

            <?php 
             $i++;
            }
            ?>
        </table>
</section> //The end of the section where the info is displayed

        <script type="text/javascript">
        remarcarBusqueda(<?php echo $_SESSION['VALOR_BUSQUEDA'];?>);
        //The $_SESSION ['VALOR_BUSQUEDA'] holds the value (ID) of the 
        //element to search that has been already checked in another script
        </script>

JavaScript

function remarcarBusqueda(elemento)
{
    rem = document.getElementById(elemento);
    rem.style.background="red";
}

Notes:

  • I only got the null error

So i hope you guys can help me. Thanks.

P.S: I'm from Mexico, that's why the var names are in Spanish, sorry :)

UPDATE Here is the HTML output:

https://i.stack.imgur.com/ZU4Fs.jpg

UPDATE #2 If i change the tr ID to tr id="Row", for example, no matter what value i enter (1, 4 or 7), the 1st Row always gets Red, and i don't get the null error. Of course, i don't send any parameter to the JS, and in the line document.getelementById i put "Row" as parameter.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
HeyIts1v4n
  • 3
  • 3
  • in HTML, all object should never using the numeric as id, because Javascript cannot access it. For your case, you can prefix a string, such as `` – Allen Chak May 04 '14 at 08:21
  • It would help if you posted the resulting HTML instead of the PHP. Your problem is clearly with the JavaScript, not the PHP. – Ayman Safadi May 04 '14 at 08:35

1 Answers1

-1

Is it $c1 is numeric value??

Try using this to fix:

<tr id="myTr<?php echo $c1; ?>">
...
<script type="text/javascript">
...
    remarcarBusqueda('myTr' + <?php echo $_SESSION['VALOR_BUSQUEDA'];?>);
</script>

Note:

in HTML DOM, all objects should never using the numeric as id, because Javascript cannot access it.

Allen Chak
  • 1,802
  • 1
  • 10
  • 21
  • This is not true. Example here: http://jsfiddle.net/6N6aa/. More info here: http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html – Ayman Safadi May 04 '14 at 08:33