javascript - さまざまな列を持つhtmlテーブルの最後の列を削除する方法

Question

レコードの表形式のリスト、つまり HTML テーブルがあります。

ほとんどの行には 3 つの列がありますが、1 つまたは 2 つの列しかない場合もあります。この場合、colspan を使用して他の列に広げます。

やりたいこと: ユーザーがページのボタンをクリックすると、最後の列を削除 (折りたたみ) したいのですが、複数の列がある場合にのみです。

これはjqueryでどのように可能ですか(可能であれば)?

Answer 1

このようなことを試してください

$('tr').each(function(){
   $("td:last").hide()
})

Answer 2

これは可能ですが、クラスごとに必要なテーブルを選択できるように、テーブルにクラスを追加する必要もあります。

if($('tr').length > 1) {
   $('tr').each(function(){
      $("td:last").hide()
   })
}

たとえば、クラスmyTableを追加する場合は、次のようにします。

if($('.myTable tr').length > 1) {
   $('.myTable tr').each(function(){
      $(".myTable tr td:last").hide()
   })
}

Answer 3

テーブルをレスポンシブにするために、最新の列を削除する前に、列の保存数 (colspan) を行に保存する必要があると思います。

少し関数を書きました。実際に試していない

<button onclick="removeLatestCol()"></button>

<script>
function removeLatestCol() {
    var latest_row = $("table tr:last");
    var cols = $("td", latest_row);

    if (cols.length == 1) {
        latest_row.remove();
        return;
    }

    var latest_col = cols.filter(":last");
    latest_col.prev().attr("colspan", (latest_col.prev().attr("colspan") || 1) + (latest_col.attr("colspan") || 1));
    latest_col.remove()
}
</script>

Answer 4

これを試して

$('tr').each(function(){
  $("td:last").hide();
})