Сбросить счетчик приращений после перетаскивания на таблицу html - PullRequest
Новая
       3

Сбросить счетчик приращений после перетаскивания на таблицу html

0 голосов
/ 19 февраля 2020

У меня есть таблица HTML, где я использую счетчик приращений для получения нумерации строк. 

table {
    counter-reset: rowNumber;
}

table tbody tr {
    counter-increment: rowNumber;
}

table tr td:first-child::after {
    content: counter(rowNumber);
   min-width: 1em;
    margin-right: 0.5em;
    text-align:center;
    vertical-align:middle;
}

Стол перетаскиваемый. У меня есть флажок. Теперь я хочу, чтобы каждый раз, когда я перетаскивал строки и устанавливал флажок, он сбрасывал нумерацию строк. 

<div style="overflow-x:auto; margin-top:5px" class="demo_container">
                <table id="tg-2xfqW" class="tg">
                    <thead style="width:100%">
                        <tr>
                            <th style="width:10%; text-align:center" class="tg-gx32">No</th>
                            <th style="width:10%; text-align:center" class="tg-gx32">Sequence</th>
                            <th style="width:20%; text-align:center" class="tg-gx32">GPS</th>
                            <th style="width:50%; text-align:center; margin-right:10px" class="tg-gx32">Address</th>
                            <th style="width:10%; text-align:center" class="tg-gx32">Start</th>
                            <th style="width:10%; text-align:center" class="tg-gx32">End</th>
                        </tr>
                    </thead>
                    <tbody id="selections">
                        @if (ViewBag.Shortestroute != null)
                        {
                            foreach (var r in ViewBag.Shortestroute)
                            {
                                <tr id="tablecontent" , class="selection">
                                   <td style="width:10%; vertical-align:middle; margin-right:5px; text-align:center" draggable="true" class="tg-gx32"><img src="https://img.icons8.com/ios-filled/15/000000/move.png" class="my-handle" style="margin-top:2px"></td>
                                    <td style="width:10%; vertical-align:middle; text-align:center" draggable="true" class="tg-gx32">@r.Sequence</td>
                                    <td style="width:20%; vertical-align:middle; text-align:center" draggable="true" class="tg-gx32">@r.Point</td>
                                    <td style="width:50% ;vertical-align:middle" class="tg-gx32" draggable="true">@r.Address</td>
                                    <td style="width:10%; vertical-align:middle; text-align:center" draggable="true" class="tg-gx32"><input value="1" id="type_radio_1" name="startgps" type="radio" /></td>
                                    <td style="width:10%; vertical-align:middle; text-align:right" draggable="true" class="tg-gx32"><input value="2" id="type_radio_2" name="endgps" type="radio" /></td>
                                </tr>
                            }
                        }
                    </tbody>
                </table>
            </div>

Как я могу это сделать?

...