如何使用 JQuery 進行動態更改並訪問值的父元素？
[英]How to make a dynamic change and access a parent element on a value using JQuery?
問題描述
我有一個表格，它與我之前在這里的問題有關。 我想要做的是在標記為“SERIAL END”的輸入元素中獲取先前的值，然后在將一行添加到“SERIAL START”時自動附加它的值，不僅是 append，還會將 +1 添加到它的值（這是已解決），但我想在值已添加時添加 function，它將獲得已編輯父元素的值並且可以更改，但仍將子元素的值添加 +1。
這是我的全部代碼
$(document).ready(function() { $("#addrow").on("click", function() { var startElement = $("#start"); var value = parseInt(startElement.val()); startElement.val(value); var hidden = startElement.val(); var tbl = document.getElementById('tbl').rows.length; if (tbl === 5) { alert("It is limited for 5 rows only"); } else { var lasttr = $('#tbl tr:last').attr('id'); var lastinsertedrow = lasttr.replace('tablerow_', ''); var end = $('#serend' + lastinsertedrow).val(); end = (parseInt(end) + parseInt(1)); var newRow = $("<tr id='tablerow_" + hidden + "'>"); var cols = ""; cols += '<td><select onchange="selectmodel(this)"data-live-search="true" placeholder="Select your model name"id="model' + hidden + '" class="form-control selectpicker show-menu-arrow " name="model[]" required><option selected disabled> Select your model name</option><?php $sql = mysqli_query($con,"call gettrial"); if (mysqli_num_rows($sql) > 0) { while ($row = mysqli_fetch_assoc($sql)) { echo "<option value=$row[id]>".$row['model_name']. " </option>"; } }? > < /select></td > '; cols += '<td><input id="code' + hidden + '" value="" type="text" class="form-control" name="code[]" readonly="" /></td>'; cols += '<td><input type="text" class="form-control" id="serstart' + hidden + '" name="serstart[]" value="' + end + '" readonly/></td>'; cols += '<td><input type="text" class="form-control" id="serend' + hidden + '" name="serend[]" onchange="myChangeFunction(this)" required /></td>'; newRow.append(cols); $("table.order-list").append(newRow).find('.selectpicker').selectpicker({ liveSearch: true, showSubtext: true }); $("#serend" + hidden).on("change", function(e) { var x = $("#serend").val() if ($(this).val() > (x * 100) / 100) { alert("You exceed in " + x + " pls do enter below or exact " + x) } }) const hide = document.getElementById('start'); hide.value = (parseInt(hidden) + parseInt(1)); hidden++; } }); $('#remove').click(function() { $("#myTable").each(function() { if ($('tr', this).length > 2) { $('tr:last', this).remove(); } }); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <?php include ('../include/header_pis.php'); ?> <html> <title>Lot_Registration</title> <body> <div id="wrapper"> <div id="page-wrapper"> <div class="row"> <div class="col-lg-12"> <h1 class="page-header"> Lot Registration <a href="rbg_table.php"> <button class="btn btn-success pull-right"> <span class="fa fa-reply"> Back </span> </button> </a> </h1> </div> </div> <div class="row"> <div class="col-lg-12"> <div class="panel panel-primary"> <div class="panel-heading"> Model Form </div> <div class="panel-body"> <div class="row"> <div class="col-lg-12"> <form class="className" name="form" id="form" action="lot_registration_model_submit.php" data-toggle="validator" enctype="multipart/form-data" method="POST"> <div class="form-group"> <label class="col-sm-3">Lot No.: <font color="red">*</font></label> <div class="col-sm-9"> <input autocomplete="off" class="form-control" type="text" id="lotno" name="lotno" style="text-transform:uppercase" required> </div> </div> <div class="form-group"> <label class="col-sm-3">Month of: <font color="red">*</font></label> <div class="col-sm-9"> <input autocomplete="off" class="form-control" type="date" id="monthof" name="monthof" style="text-transform:uppercase" required> </div> </div> <div class="form-group"> <label class="col-sm-3">Serial Start: <font color="red">*</font></label> <div class="col-sm-9"> <input autocomplete="off" class="form-control" type="text" id="serstart" name="serstart" style="text-transform:uppercase" required> </div> </div> <div class="form-group"> <label class="col-sm-3">Serial End: <font color="red">*</font></label> <div class="col-sm-9"> <input autocomplete="off" class="form-control" type="text" id="serend" name="serend" style="text-transform:uppercase" required> </div> </div> <input type="button" class="btn btn-primary pull-left" id="addrow" value="Add Row" disabled /> <input type="button" class="ibtnDel btn btn-md btn-danger" id="remove" value="Delete Row"> <br> <table width="100%" class="table order-list table-striped table-bordered table-hover" id="myTable"> <thead> <tr> <th class="col-sm-3"> <center />Model </th> <th class="col-sm-3"> <center />Code </th> <th class="col-sm-3"> <center />Serial Start </th> <th class="col-sm-3"> <center />Serial End </th> </tr> </thead> <tbody id='tbl'> <tr id="tablerow_0"> <td> <select name="model[]" id="model0" class="form-control selectpicker show-menu-arrow" data-live-search="true" title="Select your model name" onchange="selectmodel(this)" required> <?php $sql = mysqli_query($con,"SELECT model.id,model.model_name,model.code,model.status FROM model left join grouped on model.id = grouped.modelandcode WHERE cat_id='1' and model.status='1' and grouped.status is null ORDER BY model_name ASC"); $con->next_result(); if(mysqli_num_rows($sql)>0){ while($row=mysqli_fetch_assoc($sql)){ echo "<option value='".$row['id']."'>".$row['model_name']."</option>"; } }?> </select> </td> <td> <input name="code[]" type="text" id="code0" value="" class="form-control" readonly="" /> </td> <td> <input type="text" name="serstart[]" id="serstart0" class="form-control" readonly /> </td> <td> <input type="text" name="serend[]" id="serend0" class="form-control" onchange="myChangeFunction(this)" required /> </td> </tr> </tbody> </table> <input type="hidden" value="1" id="start" /> <button id="submit" type="submit" class="btn btn-primary pull-right"><span class="fa fa-check">   Submit</span></button> </form> </div> </div> </div> </div> </div> </div> </div> </div> </body> <script>
1 個解決方案
解決方案1
0 已采納 2021-02-18 05:15:03
正如我在評論中所說，您只需要在輸入已更改的位置獲取 tr 的index ，然后使用該訪問下一個 tr 輸入並在其中添加值。
演示代碼：
$("[id*=serend]").on("change", function(e) { var x = $("#serend").val() if ($(this).val() > (x * 100) / 100) { alert("You exceed in " + x + " pls do enter below or exact " + x) } else { //get index of tr var row = $(this).closest('tr').index() + 1; var end = $(this).val(); //get value of input change end = (parseInt(end) + parseInt(1)); $("tbody tr:eq(" + row + ") td:eq(2) input").val(end) //add inside next input } })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table width="100%" class="table order-list table-striped table-bordered table-hover" id="myTable"> <thead> <tr> <th class="col-sm-3"> <center />Model </th> <th class="col-sm-3"> <center />Code </th> <th class="col-sm-3"> <center />Serial Start </th> <th class="col-sm-3"> <center />Serial End </th> </tr> </thead> <tbody id='tbl'> <tr id="tablerow_0"> <td> <select name="model[]" id="model0" class="form-control selectpicker show-menu-arrow" data-live-search="true" title="Select your model name" onchange="selectmodel(this)" required> <option selected disabled> Select your model name</option> <option value='1'>A</option> <option value='2'>A2</option> <option value='3'>A3</option> </select> </td> <td> <input name="code[]" type="text" id="code0" value="M12" class="form-control" readonly="" /> </td> <td> <input type="number" name="serstart[]" id="serstart0" value="1" class="form-control" readonly /> </td> <td> <input type="number" name="serend[]" id="serend0" value="11" class="form-control"> </td> </tr> <tr id="tablerow_1"> <td> <select name="model[]" id="model1" class="form-control selectpicker show-menu-arrow" data-live-search="true" title="Select your model name" onchange="selectmodel(this)" required> <option selected disabled> Select your model name</option> <option value='1'>A</option> <option value='2'>A2</option> <option value='3'>A3</option> </select> </td> <td> <input name="code[]" type="text" id="code1" value="M12" class="form-control" readonly="" /> </td> <td> <input type="number" name="serstart[]" id="serstart1" value="1" class="form-control" readonly /> </td> <td> <input type="number" name="serend[]" id="serend1" value="" class="form-control"> </td> </tr> <tr id="tablerow_2"> <td> <select name="model[]" id="model2" class="form-control selectpicker show-menu-arrow" data-live-search="true" title="Select your model name" onchange="selectmodel(this)" required> <option selected disabled> Select your model name</option> <option value='1'>A</option> <option value='2'>A2</option> <option value='3'>A3</option> </select> </td> <td> <input name="code[]" type="text" id="code2" value="M12" class="form-control" readonly="" /> </td> <td> <input type="number" name="serstart[]" id="serstart2" value="1" class="form-control" readonly /> </td> <td> <input type="number" name="serend[]" id="serend2" value="" class="form-control"> </td> </tr> </tbody> </table>
如何使用jquery內部的click方法訪問下一個父元素？
[英]How to access the next parent element using jquery inside click method?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.