OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

dynamic row table behaving diifferently with two different version of bootstrap

  • Thread starter Thread starter Mian Omer
  • Start date Start date
M

Mian Omer

Guest
I have a small form where I have table in which I dynamically create new rows when as per need! but When i am using "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" then first row is by default available . But when I tried to use upgraded Bootstrap version "href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"

then its hide first default row as well! below is the code , i dont knew whats wrong! can any expert highlight my error.

Code:
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Medicine Re-Location Form</title> 

    
        <link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">       
    
  
   
  

</head>
  <body>




    <div class="container ">
       <div class="panel panel-default">
 <div class="panel-heading" style="background-color: #3fbbc0;"><h4>Medicine Request Form</h4></div>   
              
             <div class="panel-body">
    <form method="POST" action="invoice.php">
            <div class="card-body">

               
                            
                            
                        </div>
            






  <table class="table table-bordered">
                    <thead class="table-success" style="background-color: #3fbbc0;">
                      <tr>
                        
                        <th width="15%"><center>Product</th>                       
            <th width="10%"><center>Qty (No)</th>                    
                    
            <th width="20%"><center>Remarks</th>
            <th width="5%"></th>

                                               
                         <button type="button" class="btn btn-sm btn-success" onclick="BtnAdd()">Add Item</button>                         
                        </th>
</tr>
                    </thead>
                    <tbody id="TBody">
                      <tr id="TRow" class="d-none" align = "center">

 <td><Select  class="scode form-control text-end" name="scode[]" id = "scode"  required onchange="GetDetail(this.closest('tr'))">
<option value="">Select Product</option>
    <?php
    include('db.php');
    $sql = mysqli_query($con,"SELECT * FROM procd2");
    while($row=mysqli_fetch_array($sql))
    {
    echo '<option value="'.$row['pro1'].'">'.$row['pro1'].'</option>';
    } ?></select>



</td>

       
        <td><input type="text" class="qty form-control text-end" name="qty[]" id="ccc" pattern="\d+"></td>
            
     
      
           <td><input type="text" class="form-control text-end" name="remarks3[]"  id="zzz" ></td>
        <td class="NoPrint"><button type="button" class="btn btn-success"  style="line-height: 1;" onclick="BtnDel(this)">x</button></td>
            
                      </tr>   </tbody> </table>


 <div class="col-lg-4"> <div class="form-group"><center>
        <input type="submit" name="submit" id="submit" value="Submit"  class="btn btn-success submit_btn invoice-save-btm"> 
        
    

</form>

  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script type="text/javascript" src="frontend-script.js"></script>
 


   
 </body>
</html>

<script type="text/javascript">

function GetPrint()
{
    /*For Print*/
    window.print();
}

function BtnAdd()
{
    /*Add Button*/
    var v = $("#TRow").clone().appendTo("#TBody") ;
    $(v).find("input").val('');
    $(v).find("input").autocomplete({
        source: 'backend-script.php'  
    });
    $(v).removeClass("d-none");
    $(v).find("th").first().html($('#TBody tr').length - 1);
}

function BtnDel(v)
{
    /*Delete Button*/
       $(v).parent().parent().remove(); 
       GetTotal();

        $("#TBody").find("tr").each(
        function(index)
        {
           $(this).find("th").first().html(index);
        }

       );
}

<p>I have a small form where I have table in which I dynamically create new rows when as per need! but When i am using "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" then first row is by default available . But when I tried to use upgraded Bootstrap version "href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"</p>
<p>then its hide first default row as well! below is the code , i dont knew whats wrong! can any expert highlight my error.</p>
<pre><code>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Medicine Re-Location Form</title>


<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">





</head>
<body>




<div class="container ">
<div class="panel panel-default">
<div class="panel-heading" style="background-color: #3fbbc0;"><h4>Medicine Request Form</h4></div>

<div class="panel-body">
<form method="POST" action="invoice.php">
<div class="card-body">




</div>







<table class="table table-bordered">
<thead class="table-success" style="background-color: #3fbbc0;">
<tr>

<th width="15%"><center>Product</th>
<th width="10%"><center>Qty (No)</th>

<th width="20%"><center>Remarks</th>
<th width="5%"></th>


<button type="button" class="btn btn-sm btn-success" onclick="BtnAdd()">Add Item</button>
</th>
</tr>
</thead>
<tbody id="TBody">
<tr id="TRow" class="d-none" align = "center">

<td><Select class="scode form-control text-end" name="scode[]" id = "scode" required onchange="GetDetail(this.closest('tr'))">
<option value="">Select Product</option>
<?php
include('db.php');
$sql = mysqli_query($con,"SELECT * FROM procd2");
while($row=mysqli_fetch_array($sql))
{
echo '<option value="'.$row['pro1'].'">'.$row['pro1'].'</option>';
} ?></select>



</td>


<td><input type="text" class="qty form-control text-end" name="qty[]" id="ccc" pattern="\d+"></td>



<td><input type="text" class="form-control text-end" name="remarks3[]" id="zzz" ></td>
<td class="NoPrint"><button type="button" class="btn btn-success" style="line-height: 1;" onclick="BtnDel(this)">x</button></td>

</tr> </tbody> </table>


<div class="col-lg-4"> <div class="form-group"><center>
<input type="submit" name="submit" id="submit" value="Submit" class="btn btn-success submit_btn invoice-save-btm">



</form>

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="frontend-script.js"></script>




</body>
</html>

<script type="text/javascript">

function GetPrint()
{
/*For Print*/
window.print();
}

function BtnAdd()
{
/*Add Button*/
var v = $("#TRow").clone().appendTo("#TBody") ;
$(v).find("input").val('');
$(v).find("input").autocomplete({
source: 'backend-script.php'
});
$(v).removeClass("d-none");
$(v).find("th").first().html($('#TBody tr').length - 1);
}

function BtnDel(v)
{
/*Delete Button*/
$(v).parent().parent().remove();
GetTotal();

$("#TBody").find("tr").each(
function(index)
{
$(this).find("th").first().html(index);
}

);
}
</code></pre>
 

Latest posts

I
Replies
0
Views
1
impact christian
I
Top