<!DOCTYPE html>
<html>
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<table id="mytable">
  <thead>
    <tr>
        <th rowspan="2">Line No.</th>
        <th rowspan="2">Record Series Number</th>
        <th rowspan="2">Records Series Name</th>
        <th rowspan="2">Temporary BOX#</th>
        <th rowspan="2">Disposal Date</th>
        <th colspan="2" style="text-align:center">Dates of Record</th>
        <th rowspan="2">Range</th>
        <th rowspan="2">Action</th>
    </tr>
    <tr>
        <th scope="col">From</th>
        <th scope="col">To</th>
    </tr>
  </thead>
  <tbody>
   <tr class="rows"><td>1</td ><td><select id="recordsNumber"><option value="" selected disabled hidden>Choose here</option><option value="CRA AND LPA CASE FILES">MAG-35-01</option><option value="ROLL NUMBER FILES">MAG 59-01</option><option value="HEARING DOCKETS">MAG 59-02</option></select></td><td><input type='text' id='recordsName' value="test" disabled /></td><td><input type='text' id='tempbox' /></td><td><input type='date' id='disposalDate' /></td><td><input type='date' id='from' /> </td><td><input type='date' id='to' /></td><td><input type='text' id='range' maxlength='200' /></td><td><button class='btn btn-danger btn-xs btn-delete'>Delete</button></td></tr>
  </tbody>
</table>
<button type="button" id="replicateButton">replicate</button>
</body>
<script>
  $(document).ready(function() {
$("#mytable tbody ").on("click", 'tr', function () {
      var $dropdown = $(this).find('select');
      var selectedText = $dropdown.find('option:selected').text();
      var selectedValue = $dropdown.val();
      $(this).find("input[id='recordsName']").val(selectedValue);
      $(this).find("input[id='recordsName']").prop('title', selectedValue);
      console.log($(this))
  })
    
  $("#replicateButton").on("click", function () {
      debugger;
      var newRow = "<tr><td>1</td><td><select id='recordsNumber'><option value='' selected disabled hidden>Choose here</option><option value='CRA AND LPA CASE FILES'>MAG-35-01</option><option value='ROLL NUMBER FILES'>MAG 59-01</option><option value='HEARING DOCKETS'>MAG 59-02</option></select></td><td><input type='text' id='recordsName' value='test' disabled /></td><td><input type='text' id='tempbox' /></td><td><input type='date' id='disposalDate' /></td><td><input type='date' id='from' /> </td><td><input type='date' id='to' /></td><td><input type='text' id='range' maxlength='200' /></td><td><button class='btn btn-danger btn-xs btn-delete'>Delete</button></td></tr>"
      $("table tbody").append(newRow);
  });
});
</script>
</html>
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
Output

This bin was created anonymously and its free preview time has expired. Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers