如何使用php在innerhtml中设置选择选项

Question

我有一个HTML页面。我在哪里添加一个带有选择框的新表格行。 我想动态添加选项。这是我的代码：

function insertRow（）：

＆＃13;

＆＃13;

  function insertRow(){

            <?php 
                       $con = mysqli_connect("localhost","root", "","shop_details");
                       $sql="SELECT  * from category_table where parent_id='0'";
                        $result=mysqli_query($con,$sql); 

                     ?>     
            var table=document.getElementById("myTable");
            var row=table.insertRow(table.rows.length);
                row.id="row"+index;

            var cell1=row.insertCell(0);
            var t1=document.createElement("div");
                t1.id = "txtslnum"+index;
                 t1.name = "txtslnum"+index;
                t1.style="width:50px; text-align:center; padding-left:10px;";
                t1.innerHTML=index;
                cell1.appendChild(t1);

            var cell2=row.insertCell(1);
            var t2=document.createElement("select");
               //var newOp = document.createElement("option");
                t2.id = "main_cat"+index;
                 t2.name = "main_cat"+index;
                  t2.style="height:40px;width:250px; ";
                  t2.setAttribute("class","main_cat");
               t2.innerHTML="<?php while($row = mysqli_fetch_array($result))
						{					
						?> 
						<option value=<?php echo ($row ['cat_id']);?>>
						<?php echo ($row ['cat_name']);?>
						</option>
						<?php } ?>"
						 ;
                cell2.appendChild(t2);
                

            var cell3=row.insertCell(2);
            var t3=document.createElement("input");
                t3.id = "item"+index;
                 t3.name = "item"+index;
                
                  
                cell3.appendChild(t3);

            var cell4=row.insertCell(3);
            var t4=document.createElement("input");
                t4.id = "brand"+index;
                 t4.name = "brand"+index;
                 cell4.appendChild(t4);

              var cell1=row.insertCell(4);
            var t5=document.createElement("input");
                t5.id = "product_desc"+index;
                 t5.name = "product_desc"+index;
                 cell1.appendChild(t5);

                  var cell1=row.insertCell(5);
            var t6=document.createElement("input");
                t6.id = "price"+index;
                 t6.name = "price"+index;
                
                cell1.appendChild(t6);
                
    document.getElementById("pass_index").value=index;
      index++;
      

    }

＆＃13;

<table id="myTable"  >
    <tr id="head_th">
    <th >Sl.No</th>
        <th>Category</th>
        
        <th>Item</th>
        <th>Brand</th>
         <th>Product Details</th>
         <th>Price</th>
        <th onClick="insertRow();" ><i class="fa fa-plus"></i></th>
            <th  onclick="deleteRow();"><i class="fa fa-minus"></i></th>
    </tr>
        <tr>
            <td><div id="txtslno1" > 1 </div> </td>
            <td><select class="main_cat" name="main_cat"  ><option>--select--</option><?php while($row = mysqli_fetch_array($result))
						{					
						?> 
						<option value=<?php echo ($row ['cat_id']);?>>
						<?php echo ($row ['cat_name']);?>
						</option>
						<?php } ?>
						</select></td>
           
            <td><input type="text" id="item" name="item"    /></td>
            <td><input type="text" id="brand"name="brand"   /></td>
            <td><input type="text" id="product_desc" name="product_desc"    /> 
                      </td>
             <td><input type="text"   name="price"     /> </td>
           
         </tr>
    </table>

＆＃13;

＆＃13;

＆＃13;

但是这段代码在添加新行时会显示一些错误。我的代码怎么了？