亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

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

我必須調用兩個按鈕單擊事件添加和從 jquery 選項卡中刪除，我正在使用 jquery 表單

我必須調用兩個按鈕單擊事件添加和從 jquery 選項卡中刪除，我正在使用 jquery 表單

蝴蝶刀刀 2023-05-25 17:20:40
這是我的代碼，在 jquery 選項卡內的表格上添加和刪除按鈕，但是當我調用 click 事件時，它沒有調用它。<div id="tabs-2">    <form id="DSLform"><table id="table-1" class="add1" border ="1"><!-- DSL --><thead><tr><td colspan="6" align="center" style="text-shadow: black;"><b>DSL LOCO</b></td></tr><tr>    <th class="small">S.No</th>    <th>LOCO NO</th>     <th>SHED</th>    <th class="sizing"> SCHEDULE</th>    <th>  PROGARMME </th >    <th><input type="submit" class="add1" value="+"></th>    <!-- <th><button id="butVal1" type="button"> + </button></th> -->    </tr> </thead><tbody><tr class="tabRow1" id="1item"><td class="sno1">1</td><td><input type="text" name="loco_no"/> </td><td> <input type="text" name="shed"/>  </td><td> <input type="text" name="schedule"/> </td><td><input type="text" name="programme"/> </td><td><button class="remove1">Remove</button></td></tr></tbody></table>and my javascript file is    (document).ready( function() {    $("#butVal1").click(function(){ var rowLen =  $('tr.tabRow1').length;  if(rowLen>9)  {        alert("no of row is reached 10");  }  else  { $("tr.tabRow1:first").clone(true).appendTo("#table-1>tbody");    $(".tabRow1:last").children("td").children("input").each(function(index, element)          {      $(element).val("");  });    }  });    $("tabs-1").on("click", "button.remove1", function(){if($(this).parents("tr").siblings("tr.tabRow1").length > 0){   $(this).closest("tr.tabRow1").remove();        }else{  alert("you can't remove this record");}});     $("#tabs-1").on("click", ".add1, .remove1", function(){           $("td.sno1").each(function(index,element){                          $(element).text(index + 1);       });  });});我在上面添加了我的代碼，我需要這個添加和提交按鈕在 jquery 選項卡中工作，這些文本框值也需要保存為記錄，當我從表中添加或刪除行時如何識別每一行
查看完整描述

1 回答

?
慕桂英546537

TA貢獻1848條經驗 獲得超10個贊

在下面的代碼中，我使用.length獲取行的長度和added 1顯示S.no計數，因為計數從1. 然后，我沒有循環遍歷所有輸入，而是用來.find("input").val("")清空所有輸入值，然后最后僅用于appendTo附加tr特定表。


然后，當用戶單擊remove按鈕時，我得到了表的 id，它在所有表中都是唯一的tabs，然后我將這個值傳遞給函數，以便在刪除任何行后resetValues重置列計數。S.no所以，使用表id我已經循環tbody tr并重置了計數。


演示代碼：


$(document).ready(function() {

  $(function() {

    $("#tabs").tabs();

  });

  //click on add

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

    var apendTo = $(this).closest("table").find("tbody")

    //get length of trs

    var rowLen = $(this).closest("table").find("tbody tr").length + 1;

    if (rowLen > 9) {

      alert("no of row is reached 10");

    } else {

      //get cloned of tr

      var cloned = $(this).closest("table").find("tbody tr:first").clone(true);

      //set s.no

      cloned.find("td:eq(0)").text(rowLen);

      cloned.find("input").val(""); //empty inputs 

      cloned.appendTo(apendTo) //appends

    }

  });


  $(document).on("click", "button.remove1", function() {

    var table_id = $(this).closest("table").attr("id") //get tablename

    if ($(this).parents("tr").siblings("tr.tabRow1").length > 0) {

      $(this).closest("tr.tabRow1").remove();

      resetValues(table_id); //call to reset values

    } else {

      alert("you can't remove this record");

    }

  });



  function resetValues(el) {

    var counter = 2; //initialze to 2 because 1 is fixed

    //looping through tr not first one

    $("#" + el).find("tbody tr:not(:first)").each(function() {

      //find .sno1 class replace its counter

      $(this).find('.sno1').text(counter);

      counter++;

    })

  }

});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="tabs">

  <ul>

    <li><a href="#tabs-1">FIRST</a></li>

    <li><a href="#tabs-2">SECOND</a></li>

  </ul>

  <div id="tabs-1">

    <form id="DSLform">

      <table id="table-1" class="add1" border="1">

        <!-- DSL -->

        <thead>

          <tr>

            <td colspan="6" align="center" style="text-shadow: black;"><b>DSL LOCO</b></td>

          </tr>

          <tr>

            <th class="small">S.No</th>

            <th>LOCO NO</th>

            <th>SHED</th>

            <th class="sizing"> SCHEDULE</th>

            <th> PROGARMME </th>

            <th><input type="button" class="add" value="+"></th>

          </tr>

        </thead>


        <tbody>

          <tr class="tabRow1" id="1item">

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

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

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

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

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

            <td><button type="button" class="remove1">Remove</button></td>

          </tr>

        </tbody>

      </table>

    </form>

  </div>

  <div id="tabs-2">

    <form id="DSLform">

      <table id="table-2" class="add1" border="1">

        <!-- DSL -->

        <thead>

          <tr>

            <td colspan="6" align="center" style="text-shadow: black;"><b>DSL LOCO</b></td>

          </tr>

          <tr>

            <th class="small">S.No</th>

            <th>LOCO NO</th>

            <th>SHED</th>

            <th class="sizing"> SCHEDULE</th>

            <th> PROGARMME </th>

            <th><input type="button" class="add" value="+"></th>

          </tr>

        </thead>


        <tbody>

          <tr class="tabRow1" id="1item">

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

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

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

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

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

            <td><button type="button" class="remove1">Remove</button></td>

          </tr>

        </tbody>

      </table>

    </form>

  </div>

</div>


注意：以上代碼適用于任何表格，您只需要確保id對所有表格都是唯一的。


查看完整回答
反對 回復 2023-05-25
  • 1 回答
  • 0 關注
  • 133 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號