evdidenziare righe tabella in base al valore

**mansportivo** · 19-01-2009, 12:00

volevo sapere come posso fare ad evidenziare le righe di una tabella in base ad un determinato valore compreso in un cella della riga stessa

ad esempio se io ho un serie di righe contenenti un cella denominata importo e volessi evidenziare lo sfondo delle righe con valore maggiore di 10 come è possibile farlo?

il tutto senza assegnare a priori una classe al <tr> durante la predisposizione della tabella

ciao a tutti e buona giornata

**cavicchiandrea** · 19-01-2009, 23:55

Una base da cui partire:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<title>test</title> 
<script type="text/javascript">
function evidenzarighe(){
var Tabella = document.getElementById("tab").getElementsByTagName("td")
for(var i = 1; i<Tabella.length; i++){
if(Tabella[i].innerHTML >= 10)Tabella[i].style.backgroundColor='red';
}
}
</script>
</head>
<body>
<table width="400" border="0" id="tab">
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
  </tr>
  <tr>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
  </tr>
  <tr>
    <td>10</td>
  </tr>
  <tr>
    <td>11</td>
  </tr>
  <tr>
    <td>12</td>
  </tr>
</table>Evidenza

</body>
</html>

**mansportivo** · 20-01-2009, 09:44

Originariamente inviato da cavicchiandrea
Una base da cui partire:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<title>test</title> 
<script type="text/javascript">
function evidenzarighe(){
var Tabella = document.getElementById("tab").getElementsByTagName("td")
for(var i = 1; i<Tabella.length; i++){
if(Tabella[i].innerHTML >= 10)Tabella[i].style.backgroundColor='red';
}
}
</script>
</head>
<body>
<table width="400" border="0" id="tab">
  <tr>
    <td>1</td>
  </tr>
  <tr>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
  </tr>
  <tr>
    <td>5</td>
  </tr>
  <tr>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
  </tr>
  <tr>
    <td>10</td>
  </tr>
  <tr>
    <td>11</td>
  </tr>
  <tr>
    <td>12</td>
  </tr>
</table>Evidenza

</body>
</html>

anzitutto grazie per la risposta

l'esempio fa al caso mio ma nel se una tabella è strutturata come quella sotto come posso fare?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title></title>
</head>
<body>
<table style="text-align: left; width: 100%;" border="1"
cellpadding="2" cellspacing="2">
<caption>prova</caption><tbody>
<thead>
<th>primo</th>
<th>secondo</th>
<th>terzo</th>
</thead>
<tr>
<td>1</td>
<td>a</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>b</td>
<td>325</td>
</tr>
<tr>
<td>4</td>
<td>c</td>
<td>2</td>
</tr>
<tr>
<td>9</td>
<td>d</td>
<td>5</td>
</tr>
<tr>
<td>15</td>
<td>e</td>
<td>910</td>
</tr>
<tr>
<td>18</td>
<td>f</td>
<td>36</td>
</tr>
<tr>
<td>22</td>
<td>g</td>
<td>12</td>
</tr>
<tr>
<td>35</td>
<td>h</td>
<td>123</td>
</tr>
<tr>
<td>26</td>
<td>i</td>
<td>33</td>
</tr>
<tr>
<td>5</td>
<td>l</td>
<td>25</td>
</tr>
<tr>
<td>6</td>
<td>m</td>
<td>68</td>
</tr>
<tr>
<td>11</td>
<td>n</td>
<td>65</td>
</tr>
</tbody>
</table>

</body>
</html>

ciao e grazie anticipatamente per l'interessamento

**mansportivo** · 20-01-2009, 09:53

Originariamente inviato da mansportivo
anzitutto grazie per la risposta

l'esempio fa al caso mio ma nel se una tabella è strutturata come quella sotto come posso fare?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title></title>
</head>
<body>
<table style="text-align: left; width: 100%;" border="1"
cellpadding="2" cellspacing="2">
<caption>prova</caption><tbody>
<thead>
<th>primo</th>
<th>secondo</th>
<th>terzo</th>
</thead>
<tr>
<td>1</td>
<td>a</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>b</td>
<td>325</td>
</tr>
<tr>
<td>4</td>
<td>c</td>
<td>2</td>
</tr>
<tr>
<td>9</td>
<td>d</td>
<td>5</td>
</tr>
<tr>
<td>15</td>
<td>e</td>
<td>910</td>
</tr>
<tr>
<td>18</td>
<td>f</td>
<td>36</td>
</tr>
<tr>
<td>22</td>
<td>g</td>
<td>12</td>
</tr>
<tr>
<td>35</td>
<td>h</td>
<td>123</td>
</tr>
<tr>
<td>26</td>
<td>i</td>
<td>33</td>
</tr>
<tr>
<td>5</td>
<td>l</td>
<td>25</td>
</tr>
<tr>
<td>6</td>
<td>m</td>
<td>68</td>
</tr>
<tr>
<td>11</td>
<td>n</td>
<td>65</td>
</tr>
</tbody>
</table>

</body>
</html>

ciao e grazie anticipatamente per l'interessamento

ho dimenticato di specificare che vorrei evienziare solo le righe che hanno un valore mel td maggiore di 10 e che appartengono alla colonna denominata "primo"

**cavicchiandrea** · 20-01-2009, 12:28

Hai provato? Non dovrebbe cambiare molto prima conti le celle poi verifichi il contenuto

**mansportivo** · 20-01-2009, 15:28

Originariamente inviato da cavicchiandrea
Hai provato? Non dovrebbe cambiare molto prima conti le celle poi verifichi il contenuto

non ho provato perchè prima volevo chiarirmi le idee

secondo me dovrei contare le righe e poi la cella interessata.... o sto sbagliando?:master:

**mansportivo** · 22-01-2009, 11:26

Originariamente inviato da mansportivo
non ho provato perchè prima volevo chiarirmi le idee

secondo me dovrei contare le righe e poi la cella interessata.... o sto sbagliando?:master:

up

**pietro09** · 22-01-2009, 12:26

Prova questo: è un esercizio su jquery

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script type="text/javascript" src="../js/jquery/jquery-1.2.6.pack.js"></script>

    <script language="javascript" type="text/javascript">
// <!CDATA[
$(document).ready(function() 
        {
            //qui ci va il codice da eseguire alla lettura documento
            seleziona_righe();            
            
        }
    );

function seleziona_righe()
{
    var v = $("#table1 tr").find("td:eq(0)");
    for(var i = 0; i < v.length; i++)
    {
        if(parseInt($(v[i]).text()) > 10)
        {
            $(v[i])
                .css({border:'4px red solid', 'color':'yellow', 'font-weight':'bold'})
                .parent("tr").css("background","gray");
        }
    
    }

}


// ]]>
</script>

</head>
<body>
    <table id="table1" style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
        <caption>
            prova</caption>
        <tbody>
            <thead>
                <th>
                    primo
                </th>
                <th>
                    secondo
                </th>
                <th>
                    terzo
                </th>
            </thead>
            <tr>
                <td>
                    1
                </td>
                <td>
                    a
                </td>
                <td>
                    1
                </td>
            </tr>
            <tr>
                <td>
                    2
                </td>
                <td>
                    b
                </td>
                <td>
                    325
                </td>
            </tr>
            <tr>
                <td>
                    4
                </td>
                <td>
                    c
                </td>
                <td>
                    2
                </td>
            </tr>
            <tr>
                <td>
                    9
                </td>
                <td>
                    d
                </td>
                <td>
                    5
                </td>
            </tr>
            <tr>
                <td>
                    15
                </td>
                <td>
                    e
                </td>
                <td>
                    910
                </td>
            </tr>
            <tr>
                <td>
                    18
                </td>
                <td>
                    f
                </td>
                <td>
                    36
                </td>
            </tr>
            <tr>
                <td>
                    22
                </td>
                <td>
                    g
                </td>
                <td>
                    12
                </td>
            </tr>
            <tr>
                <td>
                    35
                </td>
                <td>
                    h
                </td>
                <td>
                    123
                </td>
            </tr>
            <tr>
                <td>
                    26
                </td>
                <td>
                    i
                </td>
                <td>
                    33
                </td>
            </tr>
            <tr>
                <td>
                    5
                </td>
                <td>
                    l
                </td>
                <td>
                    25
                </td>
            </tr>
            <tr>
                <td>
                    6
                </td>
                <td>
                    m
                </td>
                <td>
                    68
                </td>
            </tr>
            <tr>
                <td>
                    11
                </td>
                <td>
                    n
                </td>
                <td>
                    65
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

**mansportivo** · 22-01-2009, 13:26

Originariamente inviato da pietro09
Prova questo: è un esercizio su jquery

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script type="text/javascript" src="../js/jquery/jquery-1.2.6.pack.js"></script>

    <script language="javascript" type="text/javascript">
// <!CDATA[
$(document).ready(function() 
        {
            //qui ci va il codice da eseguire alla lettura documento
            seleziona_righe();            
            
        }
    );

function seleziona_righe()
{
    var v = $("#table1 tr").find("td:eq(0)");
    for(var i = 0; i < v.length; i++)
    {
        if(parseInt($(v[i]).text()) > 10)
        {
            $(v[i])
                .css({border:'4px red solid', 'color':'yellow', 'font-weight':'bold'})
                .parent("tr").css("background","gray");
        }
    
    }

}


// ]]>
</script>

</head>
<body>
    <table id="table1" style="text-align: left; width: 100%;" border="1" cellpadding="2" cellspacing="2">
        <caption>
            prova</caption>
        <tbody>
            <thead>
                <th>
                    primo
                </th>
                <th>
                    secondo
                </th>
                <th>
                    terzo
                </th>
            </thead>
            <tr>
                <td>
                    1
                </td>
                <td>
                    a
                </td>
                <td>
                    1
                </td>
            </tr>
            <tr>
                <td>
                    2
                </td>
                <td>
                    b
                </td>
                <td>
                    325
                </td>
            </tr>
            <tr>
                <td>
                    4
                </td>
                <td>
                    c
                </td>
                <td>
                    2
                </td>
            </tr>
            <tr>
                <td>
                    9
                </td>
                <td>
                    d
                </td>
                <td>
                    5
                </td>
            </tr>
            <tr>
                <td>
                    15
                </td>
                <td>
                    e
                </td>
                <td>
                    910
                </td>
            </tr>
            <tr>
                <td>
                    18
                </td>
                <td>
                    f
                </td>
                <td>
                    36
                </td>
            </tr>
            <tr>
                <td>
                    22
                </td>
                <td>
                    g
                </td>
                <td>
                    12
                </td>
            </tr>
            <tr>
                <td>
                    35
                </td>
                <td>
                    h
                </td>
                <td>
                    123
                </td>
            </tr>
            <tr>
                <td>
                    26
                </td>
                <td>
                    i
                </td>
                <td>
                    33
                </td>
            </tr>
            <tr>
                <td>
                    5
                </td>
                <td>
                    l
                </td>
                <td>
                    25
                </td>
            </tr>
            <tr>
                <td>
                    6
                </td>
                <td>
                    m
                </td>
                <td>
                    68
                </td>
            </tr>
            <tr>
                <td>
                    11
                </td>
                <td>
                    n
                </td>
                <td>
                    65
                </td>
            </tr>
        </tbody>
    </table>
</body>
</html>

funziona perfettamente!!!1

mille grazie

questo jquery è veramente eccezionale!!!

grazie ancora, gentilissimo

**pietro09** · 22-01-2009, 13:41

sì, jquery è interessante, ma io preferisco il tradizionale.

codice:

function Button2_onclick() 
{
    var trs = getElements("table1", "tr");
    for(var i = 1; i < trs.length; i++)
    {
        var tr = trs[i];
        var tds = getElements(tr, "td");
        var td = tds[1];
        if(parseInt(td.innerHTML) >= 5)
        {
            td.style.border = "4px blue solid";
            td.style.color = "red";
            td.style.fontWeight = "bolder";
            tr.style.backgroundColor = "yellow";
        }
    }
}

Discussione: evdidenziare righe tabella in base al valore

Strumenti discussione

Ricerca discussione

Visualizza

evdidenziare righe tabella in base al valore

Permessi di invio