Блог

Главная - Вопросы по программированию - таблица html с colspan — проблемы с соседними ячейками

таблица html с colspan — проблемы с соседними ячейками

#javascript #jquery #html #css #html-table

#javascript #jquery #HTML #css #html-таблица

Вопрос:

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

Я хочу объединить или разделить ячейку в зависимости от действий пользователя.

Скажем, пользователь нажимает на «7-8», затем он должен разделиться на две разные ячейки, такие как 7 и 8, с правильными данными.

Скажем, пользователь нажимает на «2», затем ближайшая левая ячейка должна быть объединена и сформировать ячейку типа «1-2» с правильными данными. (Как указано в «7-8»). Точно так же, если он нажмет на «4», он должен создать «3-4» с правильными данными.

Здесь ячейки Row2 и Row5 занимают 2 столбца в случае слияния.(Пожалуйста, посмотрите существующую таблицу).

Я пытаюсь реализовать это, изменив значения colspan, но это нежизнеспособно. Пожалуйста, предложите более чистое решение.

 <table border=1 style="height:200px; border-top:0px;">
    <tbody id="MySettings">
        <tr>
            <td width="15%">Row1</td>
            <td colspan="0" width="10%">1</td>
            <td colspan="0" width="10%">2<button type="button" style="float:right; margin-right:-6px; margin-top:-11px;"> </button></td>
            <td colspan="0" width="10%">3</td>
            <td colspan="0" width="10%">4<button type="button" style="float:right; margin-right:-6px; margin-top:-11px;"></button></td>
            <td colspan="0" width="10%">5</td>
            <td colspan="0" width="10%">6<button type="button" style="float:right; margin-right:-6px; margin-top:-11px;"> </button></td>
            <td colspan="2" width="10%">7 - 8<button type="button" style="float:right; margin-right:-6px; margin-top:-11px;"></button></td>
        </tr>
        <tr id="MySettings_2">
            <td>Row2</td>
            <td colspan="0"> <input type="checkbox" name="CheckBox1" value="1" checked="true"></td>
            <td colspan="0"> <input type="checkbox" name="CheckBox2" value="1" checked="true"></td>
            <td colspan="0"> <input type="checkbox" name="CheckBox3" value="1" checked="true"></td>
            <td colspan="0"> <input type="checkbox" name="CheckBox4" value="1" checked="true"></td>
            <td colspan="0"> <input type="checkbox" name="CheckBox5" value="1" checked="true"></td>
            <td colspan="0"> <input type="checkbox" name="CheckBox6" value="1" checked="true"></td>
            <td colspan="2"> <input type="checkbox" name="CheckBox7_8" value="1" checked="true"></td>
        </tr>
        <tr id="Row3">
            <td>Row3</td>
            <td>88.98</td>
            <td>33.98</td>
            <td>43.34</td>
            <td>123.98</td>
            <td>0</td>
            <td>65.43</td>
            <td>33.19</td>
            <td>27.8</td>
        </tr>
        <tr id="Row4">
            <td>Row4</td>
            <td>101</td>
            <td>340</td>
            <td>555.8</td>
            <td>21</td>
            <td>0</td>
            <td>56</td>
            <td>456</td>
            <td>10</td>
        </tr>
        <tr id="Row5">
            <td>Row5</td>
            <td colspan="0">7</td>
            <td colspan="0">3</td>
            <td colspan="0">6</td>
            <td colspan="0">0</td>
            <td colspan="0">0</td>
            <td colspan="0"> 4</td>
            <td colspan="2">10</td>
        </tr>
    </tbody>
</table>

Спасибо

Ответ №1:

Ссылка на JSfiddle

 $("#MySettings tr:first-child .col2").click(function() {
  if($(this).attr("colspan") == "0") {
  $(this).attr("colspan", "2");
  $(this).prev().css("display","none");
  $(this).text("1-2");
}
else {
  $(this).attr("colspan", "0");
  $(this).text("2");
  $(this).prev().css("display","table-cell");
}
});

Надеюсь, что приведенная выше ссылка поможет вам. 🙂