項目を選択して同じ行に入力して別々に保存する

Question

各行の項目を選択して別々に保存できるインターフェースを作成しようとしています。上記の例では

、最初の行が正しいことが、唯一の「RU」でなければならない第二の行のためにそれはまた、最初の行から同じコンテンツをもたらし..

例として以下、私は、ページ全体に同じ機能を使用しますが、私は行ごとに項目を分離するためにいくつかの問題に直面していますので、：

$(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/

任意のチップ？

Answer 1

すべての値を保持するグローバルselecがあります。ここでは、各行ごとに異なる配列を保持するオブジェクトです。 OPが必要と

$(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/