set Spalte-Breite mit jQuery

Ich habe eine html Tabelle mit format 

<div id="divOutputWindow">
<table>
<tbody>
<tr>
<td>/* Set Width 10 Px */</td>
<td>/* Set Width 20 Px */</td>
</tr>
<tr>
/* Same for all tr */
</tr>
</tbody>
</table>
</div>

d.h. die ersten td hat eine Breite von 10 px weiter td-15 px nächste td-20 px...ebenfalls

Was ich Versucht habe, ist

$('#divOutputWindow').find('table').$('tbody > tr > td').css('width', '10px');

InformationsquelleAutor Shaggy | 2012-11-21

  1. 3
    • Schleife durch jedes <td> innere Ihrer #divOutputWindow.
    • Verwenden .each(); für das in der loop-Sie können Zugang aktuellen
      DOM-Objekt $(this).
    • Ein Mindest-und ein stepsize, verwenden Sie $(this).index(); für die Zählung.
    • Dann verwenden Sie die .css('attr','value'); Befehl zu manipulieren
      aktuelle <td>. Es ist ein setter das css-Attribut. Vergessen Sie nicht, setzen "px" am Ende.

    Code:

    $('#divOutputWindow td').each(function() {
    var min = 10;                                  //Define a minimum
    var step = 5 * $(this).index();                //Define Step(your step is 5 here)
    $(this).css('width', (min + step) + "px");     //css attribute of your <td> width:15px; i.e.
});

    Hat es funktioniert?

    Edit: ich sah, dass @billyonecan schon gepostet, etwas ähnliches, testen Beispiele, meins funktioniert (habe es getestet)

    InformationsquelleAutor Munchies

  2. 6

    versuchen, diese

    $('div#divOutputWindow table tr td').eq(0).css('width','10px');
$('div#divOutputWindow table tr td').eq(1).css('width','20px');

    InformationsquelleAutor Ankush Jain

  3. 2

    Warum gehst du nicht verwenden, der CSS3 pseudo-Klassen?

    Wie

    td:first-child
{
    width: 10px;
}

    http://reference.sitepoint.com/css/css3psuedoclasses

    Bearbeiten

    Jsfiddle

    InformationsquelleAutor Ron van der Heijden

  4. 2

    Ich denke, dass Sie daran interessiert sind, diese eine, die man toll arbeiten: http://jsbin.com/ojunor/1/edit

    $('#divOutputWindow table tr').each(function(){
    $('td:eq(0)',this).attr({"width":"10"}).text('10');
    $('td:eq(1)',this).attr({"width":"20"}).text('20');
});

    InformationsquelleAutor Jai

  5. 2

    Können Sie verwenden:

    $('#divOutputWindow td').attr('width', 10);

    InformationsquelleAutor user1795109

  6. 1

    Ich denke, das ist, was du meintest. Im Grunde, Schleife über Ihr <td>'s, und legen Sie die Breite in Bezug auf das element, index, z.B.:

    $('#divOutputWindow td').each(function() {
  var step = 5; $td = $(this);
  $td.width(10 + (step * $td.index()));
});

    Dass Sie im Grunde am Ende mit:

    <tr>
  <td style="width: 10px;"> ... </td>
  <td style="width: 15px;"> ... </td>
  <td style="width: 20px;"> ... </td>
</tr>

    .. und so weiter

    Hier ist ein Turnschuh

    InformationsquelleAutor billyonecan

  7. 0

    Obwohl, im Idealfall tun Sie das am besten mit css (pseudo-)Klassen, können Sie diesen code verwenden:

    //Cache the td selector
var $td = $('#divOutputWindow table tr td');

$td.eq(0).width(10);
$td.eq(1).width(20);
...

    Hier ist eine funktionierende jsbin

    InformationsquelleAutor Abhilash

Schreibe einen Kommentar