How to shorten these duplicate JavaScript code into a loop?

Question

I had ten rows which each rows contain 4 column, now I want to get the value which I had import using localStorage. I find a way to put all these value independently but the code is all the repeat one. These will cause to redundancy of code. I wonder if there are a way to shorten the code using loop?

Here is my code

 var res = {};
    $(function(){
     $('#subbtn').click(function() {
      console.log($('#tab').find('tr'))
      $('tr').each(function(){
          var tmp = [];
          var cl ;
          $(this).find('select').each(function(){
            cl = $(this).attr('class');
            //console.log(cl);
            tmp.push($(this).val());
          })

          res[cl] = tmp
      })
        console.log(res);
       localStorage.setItem("testingvalue",JSON.stringify(res));
       document.getElementById("results__display").innerHTML = (localStorage.getItem("testingvalue"));
     })

    })
    $( document ).ready(function(){
   var res = {};
   try { 
    console.log('existed');
      res = JSON.parse(localStorage.getItem("testingvalue"));

   //alert(res.r1[2]);
   document.getElementsByClassName("r1")[0].selectedIndex=res.r1[0];
   document.getElementsByClassName("r1")[1].selectedIndex=res.r1[1];
   document.getElementsByClassName("r1")[2].selectedIndex=res.r1[2];
   document.getElementsByClassName("r1")[3].selectedIndex=res.r1[3];

   document.getElementsByClassName("r2")[0].selectedIndex=res.r2[0];
   document.getElementsByClassName("r2")[1].selectedIndex=res.r2[1];
   document.getElementsByClassName("r2")[2].selectedIndex=res.r2[2];
   document.getElementsByClassName("r2")[3].selectedIndex=res.r2[3];

   document.getElementsByClassName("r3")[0].selectedIndex=res.r3[0];
   document.getElementsByClassName("r3")[1].selectedIndex=res.r3[1];
   document.getElementsByClassName("r3")[2].selectedIndex=res.r3[2];
   document.getElementsByClassName("r3")[3].selectedIndex=res.r3[3];

   document.getElementsByClassName("r4")[0].selectedIndex=res.r4[0];
   document.getElementsByClassName("r4")[1].selectedIndex=res.r4[1];
   document.getElementsByClassName("r4")[2].selectedIndex=res.r4[2];
   document.getElementsByClassName("r4")[3].selectedIndex=res.r4[3];

   document.getElementsByClassName("r5")[0].selectedIndex=res.r5[0];
   document.getElementsByClassName("r5")[1].selectedIndex=res.r5[1];
   document.getElementsByClassName("r5")[2].selectedIndex=res.r5[2];
   document.getElementsByClassName("r5")[3].selectedIndex=res.r5[3];

   document.getElementsByClassName("r6")[0].selectedIndex=res.r6[0];
   document.getElementsByClassName("r6")[1].selectedIndex=res.r6[1];
   document.getElementsByClassName("r6")[2].selectedIndex=res.r6[2];
   document.getElementsByClassName("r6")[3].selectedIndex=res.r6[3];

   document.getElementsByClassName("r7")[0].selectedIndex=res.r7[0];
   document.getElementsByClassName("r7")[1].selectedIndex=res.r7[1];
   document.getElementsByClassName("r7")[2].selectedIndex=res.r7[2];
   document.getElementsByClassName("r7")[3].selectedIndex=res.r7[3];

   document.getElementsByClassName("r8")[0].selectedIndex=res.r8[0];
   document.getElementsByClassName("r8")[1].selectedIndex=res.r8[1];
   document.getElementsByClassName("r8")[2].selectedIndex=res.r8[2];
   document.getElementsByClassName("r8")[3].selectedIndex=res.r8[3];

   document.getElementsByClassName("r9")[0].selectedIndex=res.r9[0];
   document.getElementsByClassName("r9")[1].selectedIndex=res.r9[1];
   document.getElementsByClassName("r9")[2].selectedIndex=res.r9[2];
   document.getElementsByClassName("r9")[3].selectedIndex=res.r9[3];

   document.getElementsByClassName("r10")[0].selectedIndex=res.r10[0];
   document.getElementsByClassName("r10")[1].selectedIndex=res.r10[1];
   document.getElementsByClassName("r10")[2].selectedIndex=res.r10[2];
   document.getElementsByClassName("r10")[3].selectedIndex=res.r10[3];

    } 

    catch (error){
       console.log(error.message);
   }


});

Answer 1

Looking at this repeated line:

document.getElementsByClassName("r1")[0].selectedIndex=res.r1[0];

...a simple first pass improvement would be to just use a nested for loop with variables instead of "r1" and 0:

for (var r = 1; r <= 10; r++) {
  for (var i = 0; i < 4; i++) {
    document.getElementsByClassName("r" + r)[i].selectedIndex = res["r" + r][i];
  }
}

Notice, though, that this means the .getElementsByClassName("r" + r) call happens four time for each value of r, which is not very efficient - it would be better to move that into the outer loop:

var els;
for (var r = 1; r <= 10; r++) {
  els = document.getElementsByClassName("r" + r);
  for (var i = 0; i < 4; i++) {
    els[i].selectedIndex = res["r" + r][i];
  }
}

In the second version the inner loop could say i < els.length rather than i < 4, although note that either way you need to be sure you match the number of HTML elements to the number of items in your res object.