별도로 저장하려면 항목을 동일한 행 입력으로 선택하십시오.

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

모든 값을 보유하고있는 글로벌 셀렉이 있습니다. 여기에는 각 행마다 다른 배열을 유지하는 객체가 있습니다.

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