第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機(jī)立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

表格添加行、編輯行、保存行、刪除行使用HTML、CSS、JS

表格添加行、編輯行、保存行、刪除行使用HTML、CSS、JS

holdtom 2023-04-20 17:13:13
我正在做一些測試項目。我已經(jīng)完成了一些部分,比如添加編輯或保存,但我遇到了一些編碼問題。表添加行、編輯行、保存行、刪除工作正常,但當(dāng)我刪除時,不需要像 1、2、3、4 那樣重新排列。有時表結(jié)構(gòu)也會中斷。誰能幫我??$(document).ready(function(){  $(".addRow").click(function(){    var trCount = $("tr").length;        if($(".deleterow").is(':visible')){      $("table").append("<tr><td class='deleterow' style='display: table-cell;'>X</td><td class='srno'>"+ trCount  +"</td><td><input type='text'></td><td><input type='text'></td><td><input type='text'></td></tr>");    } else {      $("table").append("<tr><td class='deleterow'>X</td><td class='srno'>"+ trCount  +"</td><td><input type='text'></td><td><input type='text'></td><td><input type='text'></td></tr>");    }  });   $(".editAll").click(function(){    $("input").attr("readonly", false);  });  $(".saveAll").click(function(){    $("input").attr("readonly", true);    $("th:first-child").hide();    $("td:first-child").hide();  });  $(".delete").click(function(){    $("th:first-child").show();    $("td:first-child").show();  });  $(document).find("table").on('click','.deleterow', function(){      $(this).parent("tr").remove();   var totalLength = $("tr").length;                $("table").find("tr:nth-child(2)").children("td.srno").html();      });});
查看完整描述

1 回答

?
皈依舞

TA貢獻(xiàn)1851條經(jīng)驗 獲得超3個贊

您可以遍歷每個srno以重新排序數(shù)字,只需在您的$(".saveAll").click()函數(shù)中添加這些行:


var srno = 0;

$(".srno").each(function() {

    $(this).text(srno+1);

    srno++;

});

$(document).ready(function() {

  $(".addRow").click(function() {

    var trCount = $("tr").length;


    if ($(".deleterow").is(':visible')) {

      $("table").append("<tr><td class='deleterow' style='display: table-cell;'>X</td><td class='srno'>" + trCount + "</td><td><input type='text'></td><td><input type='text'></td><td><input type='text'></td></tr>");

    } else {

      $("table").append("<tr><td class='deleterow'>X</td><td class='srno'>" + trCount + "</td><td><input type='text'></td><td><input type='text'></td><td><input type='text'></td></tr>");

    }

  });

  $(".editAll").click(function() {

    $("input").attr("readonly", false);

  });

  $(".saveAll").click(function() {

    $("input").attr("readonly", true);

    var srno = 0;

    $(".srno").each(function() {

      $(this).text(srno + 1);

      srno++;

    });

    $("th:first-child").hide();

    $("td:first-child").hide();

  });

  $(".delete").click(function() {

    $("th:first-child").show();

    $("td:first-child").show();

  });

  $(document).find("table").on('click', '.deleterow', function() {


    $(this).parent("tr").remove();

    var totalLength = $("tr").length;

    $("table").find("tr:nth-child(2)").children("td.srno").html();


  });

});

.addRow {

  border: 1px solid #000;

  padding: 6px 10px;

  text-decoration: none;

  color: #000;

  display: inlne-block;

}


.editAll {

  border: 1px solid #000;

  padding: 6px 10px;

  text-decoration: none;

  color: #000;

  display: inlne-block;

}


.saveAll {

  border: 1px solid #000;

  padding: 6px 10px;

  text-decoration: none;

  color: #000;

  display: inlne-block;

}


.delete {

  border: 1px solid #000;

  padding: 6px 10px;

  text-decoration: none;

  color: #000;

  display: inlne-block;

}


.fulltable {

  width: 100%;

  border: 1px solid #000;

  text-align: left;

  clear: both;

  margin: 30px 0 0;

}


.fulltable th {

  border: 1px solid #000;

  padding: 10px;

}


.fulltable th:first-child {

  width: 50px;

  display: none;

  text-align: center;

}


.fulltable th:nth-child(2) {

  width: 100px;

  text-align: center;

}


.fulltable td {

  border: 1px solid #000;

}


.fulltable td:first-child {

  width: 50px;

  display: none;

  text-align: center;

}


.fulltable td:nth-child(2) {

  text-align: center;

}


.fulltable td input {

  width: 100%;

  padding: 10px;

  border: 0;

  box-sizing: border-box;

  outline: none;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a class="addRow" href="#">Add Row</a>

<a class="editAll" href="#">Edit All</a>

<a class="saveAll" href="#">Save All</a>

<a class="delete" href="#">Delete</a>


<table cellspacing="0" class="fulltable">

  <tr>

    <th>Delete</th>

    <th>Sr No.</th>

    <th>Name</th>

    <th>Id</th>

    <th>Description</th>

  </tr>

  <tr>

    <td class="deleterow">X</td>

    <td class="srno">1</td>

    <td class="name"><input type="text"></td>

    <td class="id"><input type="text"></td>

    <td><input class="description" type="text"></td>

  </tr>

</table>


查看完整回答
反對 回復(fù) 2023-04-20
  • 1 回答
  • 0 關(guān)注
  • 188 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號