Igor O Igor O - 12 days ago 6
CSS Question

Select items ids to the same row input to save separately

I'm trying to create an interface where I can select items for each row and save separately (or entire page if necessary).

table

in the example above, first row is correct, but for the second row that should be only "ru" it also brings the same content from the first row..

As the example below, since I use the same function for the whole page, but I'm facing some trouble to separate the item for each row:



$(function() {
var selec = [];
$('#list li').click(function() {

if ($(this).hasClass('gray')) {
$(this).addClass("blue").removeClass("gray");
} else {
$(this).addClass("gray").removeClass("blue");
}

var this_row = $(this).closest('tr').attr('row-id');
var this_lang = $(this).attr('data-lang');

if ($(this).hasClass('blue')) {
selec.push(this_lang);
} else {
var index = selec.indexOf(this_lang);
selec.splice(index, 1);
}
$('#to_save_' + this_row).val(selec);
return false;
});

});

.tb table tr td {
border: 1px solid #ccc;
}
.minitag:hover {
background-color: #fff !important;
color: #ccc !important;
border: 1px solid #EE725C !important;
text-shadow: 0 1px #A32D16 !important;
cursor: pointer;
opacity: 0.7;
}
.minitag {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size: 10px;
background-color: #FFB600;
border: 1px solid #b62435;
text-shadow: 0 1px #ccc;
color: #000;
font-weight: 500;
margin: 0 2px 2px 0;
display: inline-block;
padding: 0 2px;
cursor: default;
}
.minitag.blue {
background-color: #4CABDA !important;
border: 1px solid #296888 !important;
text-shadow: 0 1px #296888 !important;
color: #ffffff !important;
}
.selected {
background-color: #EE725C !important;
color: #fff;
border: 1px solid #EE725C !important;
text-shadow: 0 1px #A32D16 !important;
cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table class="tb" id="list">
<tr row-id="501">
<td>je suis tré bon</td>
<td>
<li class="minitag gray" data-lang="none">
None</li>
<li class="minitag gray" data-lang="en">
English</li>
<li class="minitag gray" data-lang="ja">
Japanese</li>
<li class="minitag gray" data-lang="ko">
Korean</li>
<li class="minitag gray" data-lang="it">
Italian</li>
<li class="minitag gray" data-lang="zh">
Chinese</li>
<li class="minitag gray" data-lang="es">
Spanish</li>
<li class="minitag gray" data-lang="fr">
French</li>
<li class="minitag gray" data-lang="th">
Thai</li>
<li class="minitag gray" data-lang="de">
German</li>
<li class="minitag gray" data-lang="pt">
Portuguese</li>
<li class="minitag gray" data-lang="ro">
Romanian</li>
<li class="minitag gray" data-lang="ru">
Russian</li>
<li class="minitag gray" data-lang="ar">
Arabic</li>
<input value="" id="to_save_501" name="to_save" style="border: 1px solid #000" type="text">
</td>
<td>Save Row</td>
</tr>
<tr row-id="503">
<td>yo soy muy bello</td>
<td>
<li class="minitag gray" data-lang="none">
None</li>
<li class="minitag gray" data-lang="en">
English</li>
<li class="minitag gray" data-lang="ja">
Japanese</li>
<li class="minitag gray" data-lang="ko">
Korean</li>
<li class="minitag gray" data-lang="it">
Italian</li>
<li class="minitag gray" data-lang="zh">
Chinese</li>
<li class="minitag gray" data-lang="es">
Spanish</li>
<li class="minitag gray" data-lang="fr">
French</li>
<li class="minitag gray" data-lang="th">
Thai</li>
<li class="minitag gray" data-lang="de">
German</li>
<li class="minitag gray" data-lang="pt">
Portuguese</li>
<li class="minitag gray" data-lang="ro">
Romanian</li>
<li class="minitag gray" data-lang="ru">
Russian</li>
<li class="minitag gray" data-lang="ar">
Arabic</li>
<input value="" id="to_save_503" name="to_save" style="border: 1px solid #000" type="text">
</td>
<td>Save Row</td>
</tr>
<tr row-id="506">
<td>I am a lumberjack</td>
<td>
<li class="minitag gray" data-lang="none">
None</li>
<li class="minitag gray" data-lang="en">
English</li>
<li class="minitag gray" data-lang="ja">
Japanese</li>
<li class="minitag gray" data-lang="ko">
Korean</li>
<li class="minitag gray" data-lang="it">
Italian</li>
<li class="minitag gray" data-lang="zh">
Chinese</li>
<li class="minitag gray" data-lang="es">
Spanish</li>
<li class="minitag gray" data-lang="fr">
French</li>
<li class="minitag gray" data-lang="th">
Thai</li>
<li class="minitag gray" data-lang="de">
German</li>
<li class="minitag gray" data-lang="pt">
Portuguese</li>
<li class="minitag gray" data-lang="ro">
Romanian</li>
<li class="minitag gray" data-lang="ru">
Russian</li>
<li class="minitag gray" data-lang="ar">
Arabic</li>
<input value="" id="to_save_506" name="to_save" style="border: 1px solid #000" type="text">
</td>
<td>Save Row</td>
</tr>
</table>





https://jsfiddle.net/53henkL8/10/

any tip?

Answer

You have global selec, that holds all the values, here is object that keeps different array for each row.

$(function() {
  var selec = {};
  $('#list li').click(function() {
    if ($(this).hasClass('gray')) {
      $(this).addClass("blue").removeClass("gray");
    } else {
      $(this).addClass("gray").removeClass("blue");
    }

    var this_row = $(this).closest('tr').attr('row-id');
    var this_lang = $(this).attr('data-lang');
    if(!selec[this_row]) selec[this_row] = [];

    if ($(this).hasClass('blue')) {
      selec[this_row].push(this_lang);
    } else {
      var index = selec[this_row].indexOf(this_lang);
      selec[this_row].splice(index, 1);
    }
    $('#to_save_' + this_row).val(selec[this_row]);

    return false;
  });  
});

http://jsfiddle.net/cc71cwqe/1/

Comments