How i can get the td data getting from css to attach to my current row ,and use for my logic


Tags: javascript,jquery,html,css

Problem :

HTML:

<table class="myTable" border="1" width="80%">
<thead>
    <tr>
        <td></td>
        <td>one</td>
        <td><button onClick="MoveUp.call(this);">&#8679;</button></td>
        <td><button onClick="MoveDown.call(this);">&#8681;</button></td>
    </tr>
</thead>
<tbody>
    <tr>
        <td></td>
        <td>two</td>
        <td><button onClick="MoveUp.call(this);">&#8679;</button></td>
        <td><button onClick="MoveDown.call(this);">&#8681;</button></td>
    </tr>
    <tr>
        <td></td>
        <td>three</td>
        <td><button onClick="MoveUp.call(this);">&#8679;</button></td>
        <td><button onClick="MoveDown.call(this);">&#8681;</button></td>
    </tr>
    <tr>
        <td></td>
        <td>four</td>
        <td><button onClick="MoveUp.call(this);">&#8679;</button></td>
        <td><button onClick="MoveDown.call(this);">&#8681;</button></td>
    </tr>
    <tr>
        <td></td>
        <td>five</td>
        <td><button onClick="MoveUp.call(this);">&#8679;</button></td>
        <td><button onClick="MoveDown.call(this);">&#8681;</button></td>
    </tr>
</tbody>

CSS:

 table.myTable {
    counter-reset: rowNumber;
}
table.myTable tr {
    counter-increment: rowNumber;
}
table.myTable tr td:first-child: :before {
    content: counter(rowNumber);
    min-width: 1em;
    margin-right: 0.5em;
}

javascript:

  function get_previoussibling(n) {
     x = n.previousSibling;
     while (x.nodeType != 1) {
         x = x.previousSibling;
     }
     return x;
 }

 function get_nextsibling(n) {
     x = n.nextSibling;
     while (x != null && x.nodeType != 1) {
         x = x.nextSibling;
     }
     return x;
 }

 function MoveUp() {
     var table,
         row = this.parentNode;

     while (row != null) {
         if (row.nodeName == 'TR') {
             break;
         }
         row = row.parentNode;
     }
     table = row.parentNode;
     table.insertBefore(row, get_previoussibling(row));
 }

 function MoveDown() {
     var table,
         row = this.parentNode;

     while (row != null) {
         if (row.nodeName == 'TR') {
             break;
         }
         row = row.parentNode;
     }
     table = row.parentNode;
     table.insertBefore(row, get_nextsibling(get_nextsibling(row)));
 }

FIDDLE:http://jsfiddle.net/z5hroz4p/10/

In html table first td value is taking from css .how to get that value to use in my prgramming

Fiddle make you much more clear.

Thanks in advance



Solution :

Unfortunately, it's almost impossible to do as far as generated in a such way content exists only in the layout of the Web document. There were already simmilar questions with the same problem and, unfortunately, they don't have the solution. You can see related topic here: How to access CSS generated content with JavaScript

In this case I would suggest you to use javascript for creation and numbering of the rows but not CSS.


    CSS Howto..

    How can I map 5 distinct zone on a draggable-vertical element?

    How to apply my class from css to checkbox? [duplicate]

    How can I center text on an image using Bootstrap?

    How to exclude CSS file from Visual Studio intellisense?

    How to set min-height of div to height of viewport?

    How do I align elements using CSS?

    Hide all div element but show first two

    CSS - How to make overflow hidden on the right but not the left? [duplicate]

    How can I create a CSS selector to select when a link does not have a class of folder or start class starting with title?

    how to resize images inside a div inside another div with css?

    how to increase the photoshop sprite canvas width and height

    How to fix the height of this div

    How to override CSS? [closed]

    how to set word break in table th or td, when column and table-layout auto using CSS

    How to force html/css padding/margin on an element?

    How to change the css class=“current” when using page jumping (single page website)?

    Can't figure out how to fix CSS for 3rd party library element

    How to select -webkit-filter: drop-shadow with jQuery?

    How can i add arrow to image

    How to force a browser to show the latest changes to a CSS file?

    CSS: How do I assign one class to multiple elements?

    How make input element take up available space next to a fixed width element?

    How to change the Size of the ListBox of the datePicker in GWT?

    When I say position:fixed, how do I tell mobile browsers I mean it?

    How to show hidden content when hover in CSS not working

    How to choose font different font-weight? use bolder one or just font-weight?

    CSS: How do I shrink a div to beyond a font's invisible padding?

    How to create transparent background color in html & css [duplicate]

    Css Tricks - How to align 4 div's

    How to inspect CSS element using chrome?