Skip to main content
adicionou 209 caracteres ao conteúdo
Fonte Link
LLeon
  • 2,6mil
  • 2
  • 15
  • 10
var tabela = $('table.tab_dados');

tabela.find('tr:odd').addClass('odd');

$('<tr class="obs"><td colspan="3">obervação</td></tr>').insertAfter(tabela.find('tr'));

//defina quais obs devem aparecer
tabela.find('tr.obs:eq(1), tr.obs:eq(4)').show();
tabela.find('tr.obs:eq(1) td').text('Aqui vai um textoooooooo grandeeeeeeee como observaçãoooooooooooo.');

tabela.find('tr.obs:visible').each(function () {

var color = ($(this).prev().hasClass('odd') ? '#fff' : '#f7f7f7');

$(this).find('td').css({'border-top': '1px solid ' + color +'', 'background-color': ''+color+''});
});
.tab_dados {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
  font-family: 'Arial';
  font-size: 11px;
}
.tab_dados a {
    color: #484848;
    text-decoration: none;
}
.tab_dados th {
    background: #0091FF;
    color:#FFFFFF;
    font-style: italic;
} 
.tab_dados tr {
    height: 50px;
    border-bottom: 1px solid #D5D5D5;
    background-color: #f7f7f7;
}


.tab_dados tr:hover {
    background: #F1F1F1;
}
tfoot tr td{
    border:0;
    height: 40px;
}
.tfoot{
    width: 100%;
}

    tr.obs {
    background-color:#fff;
    text-align: left;
    display: none;
    }

tr.obs:hover {
background-color: initial;}

        tr.obs td {
        padding-left: 5px; border-top: 1px solid #fff;}

    tr.odd {
    background-color: #fff;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table class="tab_dados">
    <tr>
        <th>NOME</th>
        <th>IDADE</th>
        <th>ESTADO</th>
    </tr>

    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
</table>
var tabela = $('table.tab_dados');

tabela.find('tr:odd').addClass('odd');

$('<tr class="obs"><td colspan="3">obervação</td></tr>').insertAfter(tabela.find('tr'));

//defina quais obs devem aparecer
tabela.find('tr.obs:eq(1), tr.obs:eq(4)').show();
tabela.find('tr.obs:eq(1) td').text('Aqui vai um textoooooooo grandeeeeeeee como observaçãoooooooooooo.');
.tab_dados {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
  font-family: 'Arial';
  font-size: 11px;
}
.tab_dados a {
    color: #484848;
    text-decoration: none;
}
.tab_dados th {
    background: #0091FF;
    color:#FFFFFF;
    font-style: italic;
} 
.tab_dados tr {
    height: 50px;
    border-bottom: 1px solid #D5D5D5;
    background-color: #f7f7f7;
}


.tab_dados tr:hover {
    background: #F1F1F1;
}
tfoot tr td{
    border:0;
    height: 40px;
}
.tfoot{
    width: 100%;
}

    tr.obs {
    background-color:#fff;
    text-align: left;
    display: none;
    }

tr.obs:hover {
background-color: initial;}

        tr.obs td {
        padding-left: 5px; border-top: 1px solid #fff;}

    tr.odd {
    background-color: #fff;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table class="tab_dados">
    <tr>
        <th>NOME</th>
        <th>IDADE</th>
        <th>ESTADO</th>
    </tr>

    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
</table>
var tabela = $('table.tab_dados');

tabela.find('tr:odd').addClass('odd');

$('<tr class="obs"><td colspan="3">obervação</td></tr>').insertAfter(tabela.find('tr'));

//defina quais obs devem aparecer
tabela.find('tr.obs:eq(1), tr.obs:eq(4)').show();
tabela.find('tr.obs:eq(1) td').text('Aqui vai um textoooooooo grandeeeeeeee como observaçãoooooooooooo.');

tabela.find('tr.obs:visible').each(function () {

var color = ($(this).prev().hasClass('odd') ? '#fff' : '#f7f7f7');

$(this).find('td').css({'border-top': '1px solid ' + color +'', 'background-color': ''+color+''});
});
.tab_dados {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
  font-family: 'Arial';
  font-size: 11px;
}
.tab_dados a {
    color: #484848;
    text-decoration: none;
}
.tab_dados th {
    background: #0091FF;
    color:#FFFFFF;
    font-style: italic;
} 
.tab_dados tr {
    height: 50px;
    border-bottom: 1px solid #D5D5D5;
    background-color: #f7f7f7;
}


.tab_dados tr:hover {
    background: #F1F1F1;
}
tfoot tr td{
    border:0;
    height: 40px;
}
.tfoot{
    width: 100%;
}

    tr.obs {
    background-color:#fff;
    text-align: left;
    display: none;
    }

tr.obs:hover {
background-color: initial;}

        tr.obs td {
        padding-left: 5px;}

    tr.odd {
    background-color: #fff;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table class="tab_dados">
    <tr>
        <th>NOME</th>
        <th>IDADE</th>
        <th>ESTADO</th>
    </tr>

    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
</table>
adicionou 28 caracteres ao conteúdo
Fonte Link
LLeon
  • 2,6mil
  • 2
  • 15
  • 10
var tabela = $('table.tab_dados');

tabela.find('tr:odd').addClass('odd');

$('<tr class="obs"><td colspan="3">obervação</td></tr>').insertAfter(tabela.find('tr'));

//defina quais obs devem aparecer
tabela.find('tr.obs:eq(1), tr.obs:eq(34)').show();
tabela.find('tr.obs:eq(1) td').text('Aqui vai um textoooooooo grandeeeeeeee como observaçãoooooooooooo.');
.tab_dados {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
  font-family: 'Arial';
  font-size: 11px;
}
.tab_dados a {
    color: #484848;
    text-decoration: none;
}
.tab_dados th {
    background: #0091FF;
    color:#FFFFFF;
    font-style: italic;
} 
.tab_dados tr {
    height: 50px;
    border-bottom: 1px solid #D5D5D5;
    background-color: #f7f7f7;
}


.tab_dados tr:hover {
    background: #F1F1F1;
}
tfoot tr td{
    border:0;
    height: 40px;
}
.tfoot{
    width: 100%;
}

    tr.obs {
    background-color:#fff;
    text-align: left;
    display: none;
    }

tr.obs:hover {
background-color: initial;}

        tr.obs td {
        padding-left: 5px; border-top: 1px solid #fff;}

    tr.odd {
    background-color: #fff;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table class="tab_dados">
    <tr>
        <th>NOME</th>
        <th>IDADE</th>
        <th>ESTADO</th>
    </tr>

    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
</table>
var tabela = $('table.tab_dados');

tabela.find('tr:odd').addClass('odd');

$('<tr class="obs"><td colspan="3">obervação</td></tr>').insertAfter(tabela.find('tr'));

//defina quais obs devem aparecer
tabela.find('tr.obs:eq(1), tr.obs:eq(3)').show();
tabela.find('tr.obs:eq(1) td').text('Aqui vai um textoooooooo grandeeeeeeee como observaçãoooooooooooo.');
.tab_dados {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
  font-family: 'Arial';
  font-size: 11px;
}
.tab_dados a {
    color: #484848;
    text-decoration: none;
}
.tab_dados th {
    background: #0091FF;
    color:#FFFFFF;
    font-style: italic;
} 
.tab_dados tr {
    height: 50px;
    border-bottom: 1px solid #D5D5D5;
    background-color: #f7f7f7;
}


.tab_dados tr:hover {
    background: #F1F1F1;
}
tfoot tr td{
    border:0;
    height: 40px;
}
.tfoot{
    width: 100%;
}

    tr.obs {
    background-color:#fff;
    text-align: left;
    display: none;
    }

tr.obs:hover {
background-color: initial;}

        tr.obs td {
        padding-left: 5px;}

    tr.odd {
    background-color: #fff;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table class="tab_dados">
    <tr>
        <th>NOME</th>
        <th>IDADE</th>
        <th>ESTADO</th>
    </tr>

    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
</table>
var tabela = $('table.tab_dados');

tabela.find('tr:odd').addClass('odd');

$('<tr class="obs"><td colspan="3">obervação</td></tr>').insertAfter(tabela.find('tr'));

//defina quais obs devem aparecer
tabela.find('tr.obs:eq(1), tr.obs:eq(4)').show();
tabela.find('tr.obs:eq(1) td').text('Aqui vai um textoooooooo grandeeeeeeee como observaçãoooooooooooo.');
.tab_dados {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
  font-family: 'Arial';
  font-size: 11px;
}
.tab_dados a {
    color: #484848;
    text-decoration: none;
}
.tab_dados th {
    background: #0091FF;
    color:#FFFFFF;
    font-style: italic;
} 
.tab_dados tr {
    height: 50px;
    border-bottom: 1px solid #D5D5D5;
    background-color: #f7f7f7;
}


.tab_dados tr:hover {
    background: #F1F1F1;
}
tfoot tr td{
    border:0;
    height: 40px;
}
.tfoot{
    width: 100%;
}

    tr.obs {
    background-color:#fff;
    text-align: left;
    display: none;
    }

tr.obs:hover {
background-color: initial;}

        tr.obs td {
        padding-left: 5px; border-top: 1px solid #fff;}

    tr.odd {
    background-color: #fff;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table class="tab_dados">
    <tr>
        <th>NOME</th>
        <th>IDADE</th>
        <th>ESTADO</th>
    </tr>

    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
</table>
adicionou 112 caracteres ao conteúdo
Fonte Link
LLeon
  • 2,6mil
  • 2
  • 15
  • 10
var tabela = $('table.tab_dados');

tabela.find('tr:odd').addClass('odd');

$('<tr class="obs"><td colspan="3">obervação</td></tr>').insertAfter(tabela.find('tr'));

//defina quais obs devem aparecer
tabela.find('tr.obs:eq(1), tr.obs:eq(3)').show();
tabela.find('tr.obs:eq(1) td').text('Aqui vai um textoooooooo grandeeeeeeee como observaçãoooooooooooo.');
.tab_dados {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
  font-family: 'Arial';
  font-size: 11px;
}
.tab_dados a {
    color: #484848;
    text-decoration: none;
}
.tab_dados th {
    background: #0091FF;
    color:#FFFFFF;
    font-style: italic;
} 
.tab_dados tr {
    height: 50px;
    border-bottom: 1px solid #D5D5D5;
    background-color: #f7f7f7;
}


.tab_dados tr:hover {
    background: #F1F1F1;
}
tfoot tr td{
    border:0;
    height: 40px;
}
.tfoot{
    width: 100%;
}

    tr.obs {
    background-color:#fff;
    text-align: left;
    display: none;
    }

tr.obs:hover {
background-color: initial;}

        tr.obs td {
        padding-left: 5px;}

    tr.odd {
    background-color: #fff;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table class="tab_dados">
    <tr>
        <th>NOME</th>
        <th>IDADE</th>
        <th>ESTADO</th>
    </tr>

    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
</table>
var tabela = $('table.tab_dados');

tabela.find('tr:odd').addClass('odd');

$('<tr class="obs"><td colspan="3">obervação</td></tr>').insertAfter(tabela.find('tr'));

//defina quais obs devem aparecer
tabela.find('tr.obs:eq(1), tr.obs:eq(3)').show();
.tab_dados {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
  font-family: 'Arial';
  font-size: 11px;
}
.tab_dados a {
    color: #484848;
    text-decoration: none;
}
.tab_dados th {
    background: #0091FF;
    color:#FFFFFF;
    font-style: italic;
} 
.tab_dados tr {
    height: 50px;
    border-bottom: 1px solid #D5D5D5;
    background-color: #f7f7f7;
}


.tab_dados tr:hover {
    background: #F1F1F1;
}
tfoot tr td{
    border:0;
    height: 40px;
}
.tfoot{
    width: 100%;
}

    tr.obs {
    background-color:#fff;
    text-align: left;
    display: none;
    }

tr.obs:hover {
background-color: initial;}

        tr.obs td {
        padding-left: 5px;}

    tr.odd {
    background-color: #fff;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table class="tab_dados">
    <tr>
        <th>NOME</th>
        <th>IDADE</th>
        <th>ESTADO</th>
    </tr>

    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
</table>
var tabela = $('table.tab_dados');

tabela.find('tr:odd').addClass('odd');

$('<tr class="obs"><td colspan="3">obervação</td></tr>').insertAfter(tabela.find('tr'));

//defina quais obs devem aparecer
tabela.find('tr.obs:eq(1), tr.obs:eq(3)').show();
tabela.find('tr.obs:eq(1) td').text('Aqui vai um textoooooooo grandeeeeeeee como observaçãoooooooooooo.');
.tab_dados {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
  font-family: 'Arial';
  font-size: 11px;
}
.tab_dados a {
    color: #484848;
    text-decoration: none;
}
.tab_dados th {
    background: #0091FF;
    color:#FFFFFF;
    font-style: italic;
} 
.tab_dados tr {
    height: 50px;
    border-bottom: 1px solid #D5D5D5;
    background-color: #f7f7f7;
}


.tab_dados tr:hover {
    background: #F1F1F1;
}
tfoot tr td{
    border:0;
    height: 40px;
}
.tfoot{
    width: 100%;
}

    tr.obs {
    background-color:#fff;
    text-align: left;
    display: none;
    }

tr.obs:hover {
background-color: initial;}

        tr.obs td {
        padding-left: 5px;}

    tr.odd {
    background-color: #fff;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table class="tab_dados">
    <tr>
        <th>NOME</th>
        <th>IDADE</th>
        <th>ESTADO</th>
    </tr>

    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
    <tr>
        <td>HUGO</td>
        <td>26</td>
        <td>MG</td>
    </tr>
</table>
Fonte Link
LLeon
  • 2,6mil
  • 2
  • 15
  • 10
Carregando