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

Question

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

user3383271 already I answered your question in your previous post. Is that not working? you want do it in CSS only? — Punitha Subramani, Sep 03 '14 at 06:36

score 1 · Accepted Answer · edited May 23 '17 at 11:57

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.

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

1 Answers1