87,910
社区成员
发帖
与我相关
我的任务
分享表格SHIFT多选
我现在有一个自己做的控件
由于checkbox太多我想实现按住Shift多选的效果，请高手解答。注：现在我创建的checkbox每个id不容易获取。
由于checkbox太多我想实现按住Shift多选的效果，请高手解答。注：现在我创建的checkbox每个id不容易获取。
...全文
请发表友善的回复…
发表回复
scscms太阳光 2013-10-01
- 打赏
- 举报
楼主应该把你的html代码放出来,感觉这并非是在table里布局。
如果是在div里给定一个class是可以实现多选的。
我的波塞冬 2013-10-01
- 打赏
- 举报
override getChecked()
Null_Reference 2013-09-30
- 打赏
- 举报
复选框不就是多选了么？ id不容易获取！命名很重要！
fzfei2 2013-09-30
- 打赏
- 举报
改成了以行为单位来选,
和checkbox 的ID没关系
<table id="tb1" width="100%" cellpadding="0" cellspacing="0" border="1">
<tr><td>aaa</td><td>bbb</td><td>ccc</td><td>ddd</td></tr>
</table>
<script>
var tb=document.getElementById('tb1');
function add(rowCount){
var rs=tb.rows,ii=0,cs=tb.rows[0].cells.length;
for(var i=0;i<rowCount;i++){
var r=tb.insertRow(-1);
for(var j=0;j<cs;j++){
r.insertCell(-1).appendChild( cEl('input',{type:'checkbox',value:ii,id: 'ch'+ ii++ } ) );
}
}
}
function cEl(tag,attrs){
var el=document.createElement(tag);
for(var k in attrs) el[k]=attrs[k]
return el
}
add(10);//生成测试数据
/////////////////////////////////////////
function getP(el,td){
while( el&& el.tagName!= td.toUpperCase()) el= el.parentNode;
return el;
}
var actCh,
chs=tb.getElementsByTagName('input'),L=chs.length;
while(L--)chs[L].i=L;
tb.onclick=function(evt){
evt=window.event||evt;
var el=evt.srcElement||evt.target;
var ch=getP(el,'tr');
if(actCh && evt.shiftKey ) selChs(ch)
actCh&&(actCh.bgColor='#ffffff');
ch.bgColor='#eaeaff';
actCh=ch;
}
function selChs(ch){
var rs=[actCh,ch].sort(function(a,b){ return a.rowIndex-b.rowIndex})
var idx=rs[0].getElementsByTagName('input')[0].i,
L=(rs[1].rowIndex-rs[0].rowIndex+1)*rs[0].cells.length;
while(L--) chs[L+idx].checked= !chs[L+idx].checked;
}
</script>
conanhhy 2013-09-30
- 打赏
- 举报
function SelectRow(selectObj) {
var row = $(selectObj).parent().parent(); // 找到TR
var find = false;
$(row).find(":checkbox").each(function() {
if (find) {
$(this).prop("checked", true);
} else {
// 通过值比较找到当前的选中框，并选中当前行当前选中框之后的选中框
if ($(this).val() == $(selectObj).val()) {
find = true;
}
}
});
}
gz5182009 2013-09-30
- 打赏
- 举报
还一个问题，如果我创建的checkbox的id值不确定，能不能用获取点击行列的方式，不使用定义id的方式来实现
gz5182009 2013-09-30
- 打赏
- 举报
您的这个效果能不能把第一个跟最后一个也选择上啊？而且能不能只选择一行，不允许跨行的
tcmakebest 2013-09-29
- 打赏
- 举报
这种想法很有创意，但是无法实现，楼主可以换个思路，
放个【全选】按钮，在内部再进行自动选中就好了。
可以用行全选，或者列全选的方式
fzfei2 2013-09-29
- 打赏
- 举报
<table id="tb1" width="100%" cellpadding="0" cellspacing="0" border="1">
<tr><td>aaa</td><td>bbb</td><td>ccc</td><td>ddd</td></tr>
</table>
<script>
var tb=document.getElementById('tb1');
function add(rowCount){
var rs=tb.rows,ii=0,cs=tb.rows[0].cells.length;
for(var i=0;i<rowCount;i++){
var r=tb.insertRow(-1);
for(var j=0;j<cs;j++){
r.insertCell(-1).appendChild( cEl('input',{type:'checkbox', i:ii,value:ii,id: 'ch'+ ii++ } ) );
}
}
}
function cEl(tag,attrs){
var el=document.createElement(tag);
for(var k in attrs) el[k]=attrs[k]
return el
}
add(10);//生成测试数据
/////////////////////////////////////////
function getP(el,td){
while( el&& el.tagName!= td.toUpperCase()) el= el.parentNode;
return el;
}
var actCh,
chs=tb.getElementsByTagName('input');
tb.onclick=function(evt){
evt=window.event||evt;
var el=evt.srcElement||evt.target;
var ch=getP(el,'td').getElementsByTagName('input')[0];
if(actCh && evt.shiftKey ) selChs(ch)
actCh&&(actCh.parentNode.bgColor='#ffffff');
ch.parentNode.bgColor='#fafaff';
actCh=ch;
}
function selChs(ch){
var cs=[actCh,ch].sort(function(a,b){ return a.i-b.i})
for(var i=cs[0].i;i<=cs[1].i;i++) chs[i].checked= !chs[i].checked;
}
</script>
KK3K2005 2013-09-29
- 打赏
- 举报
每列给个和列数字有关的样式 比如 col1 col2
每行给个和行数字有关的样式 比如 row1 row2
这样的话 你可以方便定位所有的
