CODEWITHSUNDEEP
javascripthtml
steve
steve

Reputation: 362

How to get HTML table data into selected options via the the JavaScript at run time

I have an HTML table which was two columns, I want to filter the table's data on a drill-down page, the user will filter the data using HTML select then once he clicks the submit button, JavaScript function will send the data to next page using GET/POST request.

I just to want to how can I insert the data into HTML select options from the HTML table at the run time using JavaScript. Please see the code for your reference.

enter image description here

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>

  <select name="id">
    <option selected="">Data for ID</option>
  </select>

  <select name="name">
    <option selected="">Data for Name</option>
  </select>


  <input type="submit" name="" value="Submit">

  <br>
  <br>

  <table border="2">
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
    <tr>
      <td>1</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>2</td>
      <td>dvc</td>
    </tr>
    <tr>
      <td>3</td>
      <td>nhy</td>
    </tr>
    <tr>
      <td>4</td>
      <td>wrw</td>
    </tr>



  </table>
</body>

</html>

Upvotes: 0

Views: 1086

Answers (3)

Dhananjay C
Dhananjay C

Reputation: 597

By using plain JAVASCRIPT below is a solution for your use case: 

<!DOCTYPE html>
<html>
<head>
    <title></title>
	</head>
<body>



<select name="id">
    <option selected="">Data for ID</option>
</select>

<select name="name">
    <option selected="">Data for Name</option>
</select>


<input type="submit" name="" value="Submit">

<br>
<br>

<table border="2">
    <tr>
    <th>ID</th>
    <th>Name</th></tr>
    <tr>
        <td>1</td>
        <td>abc</td>
    </tr>
    <tr>
        <td>2</td>
        <td>dvc</td>
    </tr>
    <tr>
        <td>3</td>
        <td>nhy</td>
    </tr>
    <tr>
        <td>4</td>
        <td>wrw</td>
    </tr>



</table>
</body>
</html>
<script>
  var callback = function() {
     // Handler when the DOM is fully loaded
     var el = document.querySelectorAll("tbody >tr");

     el.forEach(function(elm) {
       var cells = elm.querySelectorAll("td");

       if (cells.length > 1) {
          var id = cells[0].innerText;
          var name = cells[1].innerText;
  
          document.querySelector('select[name=id]').innerHTML += '<option value=' + id + '>' + id + '</option>';
          document.querySelector('select[name=name]').innerHTML += '<option value=' + name + '>' + name + '</option>';
       }
    })
 };

if (
   document.readyState === "complete" ||
   (document.readyState !== "loading" && !document.documentElement.doScroll)
) {
     callback();
} else {
   document.addEventListener("DOMContentLoaded", callback);
}
</script>

Upvotes: 1

Adwaith R Krishna
Adwaith R Krishna

Reputation: 892

<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>

  <select name="id" id="MyDataId">
    <option selected="">Data for ID</option>
  </select>

  <select name="name" id= "MyDataName">
    <option selected="">Data for Name</option>
  </select>


  <input type="submit" name="" value="Submit">

  <br>
  <br>

  <table id="myTable" border="2">
    <tr>
      <th>ID</th>
      <th>Name</th>
    </tr>
    <tr>
      <td>1</td>
      <td>abc</td>
    </tr>
    <tr>
      <td>2</td>
      <td>dvc</td>
    </tr>
    <tr>
      <td>3</td>
      <td>nhy</td>
    </tr>
    <tr>
      <td>4</td>
      <td>wrw</td>
    </tr>



  </table>

  <script>
    // self executing function here
    (function() {
      var idSelect = document.getElementById("MyDataId"); // selecting ID select
      var table = document.getElementById('myTable'); // selecting Table
      var nameSelect =document.getElementById("MyDataName"); // selecting Name select

      for (var i = 0, row; row = table.rows[i]; i++) {

        if (i === 0) { continue; } //for skipping headings

        var optionId = document.createElement("option");
        optionId.text = row.cells[0].innerHTML;
        idSelect.add(optionId) // adding id option

        var optionName = document.createElement("option");
        optionName.text = row.cells[1].innerHTML;
        nameSelect.add(optionName) // adding Name option
      }
    })();
  </script>
</body>

</html>

This is the solution I came up with in pure JS, By adding scripts to your html

Upvotes: 1

Berka Ayowa
Berka Ayowa

Reputation: 1

Hi using jquery below is a solution 

<!DOCTYPE html>
<html>
<head>
    <title></title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>



<select name="id">
    <option selected="">Data for ID</option>
</select>

<select name="name">
    <option selected="">Data for Name</option>
</select>


<input type="submit" name="" value="Submit">

<br>
<br>

<table border="2">
    <tr>
    <th>ID</th>
    <th>Name</th></tr>
    <tr>
        <td>1</td>
        <td>abc</td>
    </tr>
    <tr>
        <td>2</td>
        <td>dvc</td>
    </tr>
    <tr>
        <td>3</td>
        <td>nhy</td>
    </tr>
    <tr>
        <td>4</td>
        <td>wrw</td>
    </tr>



</table>
</body>
</html>
<script>

$(document).ready(function(){

	$("tbody > tr").each(function () {

	var cells = $(this).find('td');
	
	if(cells.length > 1) {
		var id = cells[0].innerText;    
		var name = cells[1].innerText;
	
		$('select[name=id]').append('<option value='+id+'>'+id+'</option>');
		$('select[name=name]').append('<option value='+name+'>'+name+'</option>');
	}
})
});

</script>

Upvotes: 0

Related Questions