2016-11-21 52 views
1

我想创建一个接口,我可以为每一行选择项目并单独保存(或整个页面,如有必要)。选择项目id到同一行输入单独保存

table

在上面的例子中

,第一行是正确的,但对于第二行,应该是唯一的“る”也带来了从第一行相同的内容..

如示例下面,因为我使用相同的功能,整个页面,但我面临着一些麻烦的项目为每一行分开:

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

任何提示?

回答

2

你有全局选择,它包含所有的值,这里是保持每行不同数组的对象。

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

+1

这个答案可以作为OP需要,请注意,在小提琴的问题,这是不一样的代码在拨弄了答案,它说 'selec.indexOf(this_lang );' 并根据答案应该是 'selec [this_row] .indexOf(this_lang);' – phobia82

+1

啊,是的。我修正了它,但是放错了链接。谢谢。 –