How to clear table data on selecting different value..?

I want to clear the table data as soon as user selects different option from dropdown menu…

Below is my html code

      <label for="Inverter">Inverter</label>
	 <select name="ino" id="ino" >
		   <option>Select The Value</option>
	<option value="1">Inverter 1</option>
    <option value="2">Inverter 2 </option>
	<option value="3">Inverter 3</option>
	<option value="4">Inverter 4</option> 
	<option value="5">Inverter 5</option> 
	<option value="6">Inverter 6</option>
	<option value="7">NIAS Auditorium(1+2+3)</option>
	<option value="8">NIAS GuestRoom(4+5+6)</option>
     </select>

Below is my table javascript code

    function drawTable(data){
       var arr1 = data;
       var table = document.getElementById("tabid");  
       var dataArray = []; 
       var implicitArray = [];

       for(i=0;i<arr1.length;i++) {
   
          implicitArray.push(arr1[i].timestamp);
		implicitArray.push(arr1[i].cuf);
      dataArray.push(implicitArray);
	  table.insertAdjacentHTML('afterbegin',"<tr><td>" + arr1[i]["timestamp"] + "</td><td>" + arr1[i]["cuf"] + "</td> </tr>"  ); 
 }  
}

This is how my table looks like

At the moment, I can’t see any connection between the HTML and the JavaScript in there. Where does the HTML element with the ID of tabid appear in the markup?

Below is my html table data

          <div id="myModal1" class="modal fade in">
    <div class="modal-dialog">
        <div class="modal-content">

            <div class="modal-header">
                <a class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span></a>
                <div class="table-title">
				<h3>CUF Table</h3>
				</div>
				<table class="table-fill" id="tabidone">
				<thead>
            </div>
		 
	<div class="modal-body">
		<tr>
		<th class="text-left">TimeStamp</th>
		<th class="text-left">CUF-Inverter1</th>
		<th class="text-left">CUF-Inverter2</th>
		<th class="text-left">CUF-Inverter3</th>
		<th class="text-left">Average CUF</th>
		</tr>
		</thead>
		<tbody class="table-hover">
		<!--tr>
		<td class="text-left" id="data"></td>
		<td class="text-left" id="data1"></td>
		</tr-->
		</tbody>
		</table>
	</div>
	
	 <div class="modal-footer">
                <div class="btn-group">
					<button id="change-chart1"  class="btn btn-primary"><span class="glyphicon glyphicon-check"></span>Save</button>
				  </div>
      </div>
	  </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->	

its embeded within the modal

There still doesn’t seem to be an element with the id of tabid. Could you maybe mean the table that has an id of tabidone?

@WebMachine…yes …tabidone is my table…

Then where is the element with an id of “tabid” that you refer to in your JavaScript code?

1 Like

The best thing is to make a demo that we can run that reproduces the issue you are having.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.