Untitled

<html>
  <style>
    #tb1 td{
      width:15%;
      border: 1px black solid;
      text-align:center;
      margin:0;
    }
    #tb2 td{
      width:15%;
      border: 1px black solid;
      text-align:center;
      margin:0;
    }
    td{
      width:15%;
      border: 1px black solid;
      text-align:center;
      margin:0;
    }
    .error{
      background: red;
    }
    .done{
      background: greenyellow;
    }
    .doing{
      background: yellow;
    }
    .pending{
      background: aqua;
    }
  </style>
  <table id="tb1">
    <tr>
      <td>xx</td>
      <td>xx</td>
      <td>xx</td>
      <td>xx</td>
      <td>xx</td>
    </tr>
    <tr>
      <td>Delete Record</td>
      <td>Delete Nearline</td>
      <td>Delete Online</td>
      <td>Restore</td>
      <td>Backup</td>
    </tr>
  </table>
  <br/>
  <table id="tb2">
    <tr>
      <td>00</td>
      <td>01</td>
      <td>10</td>
      <td>11</td>
    </tr>
    <tr>
      <td class="error">error</td>
      <td class="done">done</td>
      <td class="doing">doing</td>
      <td class="pending">pending</td>
    </tr>
  </table>

  <br/>
  <form id="calc1" onsubmit="calc();">
    <input name="serviceRequest" id="serviceRequest"> <input type="submit" value="submit">
  </form>
  <table id="tb3">
    <tr>
      <td>Delete Record</td>
      <td>Delete Nearline</td>
      <td>Delete Online</td>
      <td>Restore</td>
      <td>Backup</td>
    </tr>
    <tr id="result">
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </table>
  <br/>
  <form id="calc2" onsubmit="calc2();">
    <table id="tb4">
      <tbody><tr>
          <td>Delete Record</td>
          <td>Delete Nearline</td>
          <td>Delete Online</td>
          <td>Restore</td>
          <td>Backup</td>
        </tr>
        <tr id="inputData">
          <td class="">
            <select id="delRe" onchange="selectChanged();">
              <option class="pending" value="11">pending</option>
              <option class="doing" value="10">doing</option>
              <option class="done" value="01">done</option>
              <option class="clear" selected value="00">clear</option>
            </select>
          </td>
          <td class=""><select id="delNe" onchange="selectChanged();">
              <option class="pending" value="11">pending</option>
              <option class="doing" value="10">doing</option>
              <option class="done" value="01">done</option>
              <option class="clear" selected value="00">clear</option>
            </select>
          </td>
          <td class=""><select id="delOn" onchange="selectChanged();">
              <option class="pending" value="11">pending</option>
              <option class="doing" value="10">doing</option>
              <option class="done" value="01">done</option>
              <option class="clear" selected value="00">clear</option>
            </select>
          </td>
          <td class=""><select id="res" onchange="selectChanged();">
              <option class="pending" value="11">pending</option>
              <option class="doing" value="10">doing</option>
              <option class="done" value="01">done</option>
              <option class="clear" selected value="00">clear</option>
            </select>
          </td>
          <td class=""><select id="back" onchange="selectChanged();">
              <option class="pending" value="11">pending</option>
              <option class="doing" value="10">doing</option>
              <option class="done" value="01">done</option>
              <option class="clear" selected value="00">clear</option>
            </select>
          </td>
        </tr>
      </tbody></table>
    <input type="submit" value="submit">
  </form>
  <input id="result2">
  <script>
    function calc(){
      event.preventDefault();
      var val = document.getElementById("serviceRequest").value;
      document.getElementById("result").innerHTML="";
      var vec1 ={};
      vec1["00"]="error";
      vec1["01"]="done";
      vec1["10"]="doing";
      vec1["11"]="pending";
      var str="";

      if(isNaN(val)){
        if(val.length==10){
          str=val;
        }
      }else{
        str = parseInt(val).toString(2);
      }
      while(str.length<10){
        str = "0"+str;
      }
      if(str.length==10){
        var html="";
        for(var i=0; i<str.length; i+=2){
          var s= ""+ str[i]+str[i+1];
          html+= "<td class='"+vec1[s]+"'>"+ vec1[s]+"</td>";
        }
        document.getElementById("result").innerHTML=html;
      }
    }
    function calc2(){
      event.preventDefault();
      var s= document.getElementById("delRe").value
        +document.getElementById("delNe").value
        +document.getElementById("delOn").value
        +document.getElementById("res").value
        +document.getElementById("back").value;
      var i = parseInt(s, 2);
      document.getElementById("result2").value=i;
    }

    function selectChanged(){
      var cal = event.target.selectedOptions[0].className;
      event.target.className  = cal;
    }
  </script>
</html>