title: how to get table rows select option value using checkbox
body: <p>I have the following html table with select option in one of the columns. I want to display the values of the rows that are checked but don't know how to work with the select option value. Can someone help me modify the code? If not using DOM, can we just use PHP to get all checked values and store in $ variable? Finally I will submit the checked values and insert into table using PHP. Thanks a lot.</p>
  
  <pre><code>&lt;?php
  require_once("connMysql.php");
  $stu_add = mysqli_query($db_link, "SELECT * FROM stu");
  $rowcount = mysqli_num_rows($stu_add);
  ?&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;how to get options value in html table&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;table id="table" border="1"&gt;
      &lt;tr&gt;
      &lt;th style="text-align:center; width:70px"&gt;Classname&lt;/th&gt;
      &lt;th style="text-align:center; width:100px"&gt;Student ID&lt;/th&gt;        
      &lt;th style="text-align:center; width:100px"&gt;Name&lt;/th&gt;
      &lt;th style="text-align:center; width:100px"&gt;Grade&lt;/th&gt;
      &lt;th style="text-align:center; width:100px"&gt;Select&lt;/th&gt;        
      &lt;/tr&gt;
     &lt;?php
     if($stu_add-&gt; num_rows &gt; 0 ){
      while ($row = $stu_add-&gt; fetch_assoc()){
     ?&gt;
     &lt;tr&gt;
      &lt;td id="classname" style="text-align:center;"&gt;&lt;?php echo $row['classname'];?&gt;&lt;/td&gt;
      &lt;td id="stuid" style="text-align:center;"&gt;&lt;?php echo $row['stuid'];?&gt;&lt;/td&gt;        
      &lt;td id="stu_name" style="text-align:center;"&gt;&lt;?php echo $row['stu_name'];?&gt;&lt;/td&gt;
      &lt;td&gt;&lt;select name="grade" id="grade"&gt;
          &lt;option value=""&gt;-Please select-&lt;/option&gt;
          &lt;option value="A"&gt;A&lt;/option&gt;
          &lt;option value="B"&gt;B&lt;/option&gt;
          &lt;option value="C"&gt;C&lt;/option&gt;
          &lt;option value="D"&gt;D&lt;/option&gt;
      &lt;/select&gt;
      &lt;/td&gt;
      &lt;td align="center"&gt;
          &lt;input type="checkbox" id="checked" name="checked[]" value="&lt;?php echo $row['stuid'];?&gt;"&gt;
      &lt;/td&gt;
     &lt;/tr&gt;
     &lt;?php
     }
     }
     ?&gt;
    &lt;input type="text" id="classname" size="10"&gt;
    &lt;input type="text" id="stuid" size="10"&gt;
    &lt;input type="text" id="stu_name" size="10"&gt;
    &lt;input type="text" id="grade" size="10"&gt;
    &lt;button class="" onclick="showData()"&gt;Show data&lt;/button&gt;
    &lt;/table&gt;
    &lt;script&gt;
      function showData()
      {
          var table = document.getElementById('table');
          for(var i = 1; i &lt; table.rows.length; i++)
          {
              table.rows[i].onclick = function()
              {
                  // document.getElementById("classname").value = this.cells[0].innerHTML;
                  // document.getElementById("stuid").value = this.cells[1].innerHTML;
                  // document.getElementById("stu_name").value = this.cells[2].innerHTML;
                  // document.getElementById("grade").value = this.cells[3].innerHTML.options[0].text;
  
                  var a = this.cells[0].innerHTML;
                  var b  = this.cells[1].innerHTML;
                  var c  = this.cells[2].innerHTML;
                  var d  = this.cells[3].innerHTML.options[0].text;
                  var data = a + b + c + d;
                  alert(data);
              };
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>
    </p>