一个比较怪的问题，如何改变被选中文字的颜色和背景色？

<script>
function changecss(obj,i)
{
if(i==0)
{
obj.style.color='lightblue';
obj.style.background='white';
}
else
{
obj.style.color='orange';
obj.style.background='lightblue';
}
}
</script>
<body bgcolor=darkblue>
<table border=0><tr><td>
<input style="color:orange;background:lightblue" onselect="changecss(this,0)" onblur="changecss(this,1)" type=text value=testtest style="border-style: solid; border-width:0">
</td><tr></table>将table中每个cell中文字用无边框的text来显示，响应onselect事件，不过效果好像还是不够理想，你再调调看

解决方案 »

  1.   

    <SCRIPT LANGUAGE=javascript>
    <!--
    var tmpfont;
    var tmpbgcolor;
    var tmpcolor;
    function table_onselectstart() {
    tmp=event.srcElement;
    tmpcolor=tmp.style.color;
    tmp.style.color="red";
    tmpbgcolor=tmp.style.backgroundColor;
    tmp.style.backgroundColor="white";
    }function document_onmousedown() {
    if(tmp){
    tmp.style.color=tmpcolor;
    tmp.style.backgroundColor=tmpbgcolor;
    tmp=null;
    }}
    //-->
    </SCRIPT>
    <SCRIPT FOR=document EVENT=onmousedown>
    <!--
     document_onmousedown()
    //-->
    </SCRIPT>
    <BODY>
    <TABLE cellSpacing=1 cellPadding=1  border=1 onselectstart="return table_onselectstart()">
       <TR>
        <TD>fasfsdfasdfasdfff</TD>
        <TD>asdfasdfsdfsdfasdf</TD>
        <TD>asdfasdfsadfsdf</TD></TR></TABLE>
      

  2.   

    笔误：var tmpfont;
    改为：var tmp;
      

  3.   

    <HTML>
    <HEAD>
    <META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
    <TITLE></TITLE>
    <SCRIPT LANGUAGE=javascript>
    <!--function doselect(){
      var oSel=document.selection.createRange()
      var sTemp=oSel.text
      oSel.execCommand("BackColor",false,"#00000")
      oSel.execCommand("ForeColor",false,"#fffff")
    }
    //-->
    </SCRIPT></HEAD>
    <BODY bgcolor=darkblue  onselect=doselect()>
    <font id=a color=blue>请选中这段文字.....</font>
    </BODY>
    </HTML>
    ------------------------------------------------------------------
    由于选中的文字的高亮显示的样式是相对于原来文本的颜色和背景的，只要调整上面的颜色达到你满意即可~~~~~
      

  4.   

    用createRange()会比较好,另外楼上对颜色好像很感冒,怎么都少了一个字？-_-
      

  5.   

    呵呵，不好意思。最近连续加班困的要死，晚上还要来csdn转转，所以有点乱，var sTemp=oSel.text原来考虑是当焦点失去以后用来恢复到原来状态的，自己改改吧~~~zzzZZZZZZ
      

  6.   

    不行啊，效果都不理想，这样把，我把我的源代码贴出来，大家帮我看看把：
    源代码：
    －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
    <html>
    <head>
    <title>日志维护</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <style type="text/css">
    .NormalRow
    {
    BACKGROUND-COLOR: Transparent;
    }
    .SelectedRow
    {
    BACKGROUND-COLOR: #cccccc;
    }
    </style>
    <script language="JavaScript">
    <!--var intLastClicked = -1;function MST_ClickTr(l_Index){ //无效参数
    if (l_Index < 0) return false; if (event.ctrlKey){ //按下Ctrl，直接增加/去除选择
    MST_ToggleHighlight(l_Index);
    intLastClicked = l_Index;
    }else{ //没有按下Ctrl if (event.shiftKey){ //按下Shift
    if (intLastClicked < 0){ //前面没有选择过，则直接选择当前的
    MST_SetNormalAll();
    MST_ToggleHighlight(l_Index);
    intLastClicked = l_Index;
    }else{ //前面选择过，则选中所有在intLastClicked与l_Index之间的 MST_SetNormalAll(); var l_intLow = intLastClicked < l_Index ? intLastClicked : l_Index;
    var l_intHigh = intLastClicked > l_Index ? intLastClicked : l_Index; if (document.all("arrTr").length > 1)
    for (var i = l_intLow; i <= l_intHigh; i++)
    MST_SetHighlight(i);
    else
    MST_SetHighlight(0); //intLastClicked不变
    } }else{ //既没有按下Ctrl，又没有按下Shift，则直接选择当前的
    MST_SetNormalAll();
    MST_ToggleHighlight(l_Index);
    intLastClicked = l_Index;
    }
    }
    }//将全部行普通显示
    function MST_SetNormalAll(){ if (document.all("arrTr").length > 1)
    for (var i = 0; i < document.all("arrTr").length; i++)
    MST_SetNormal(i);
    else
    MST_SetNormal(0);
    }//切换是否被选中的状态
    function MST_ToggleHighlight(l_Index){ var l_objTr;
    if (document.all("arrTr").length > 1)
    l_objTr = document.all("arrTr")[l_Index];
    else
    l_objTr = document.all("arrTr"); if (l_objTr.className.toLowerCase() == "normalrow")
    MST_SetHighlight(l_Index);
    else
    MST_SetNormal(l_Index);
    }//将l_Index代表的行高亮显示
    function MST_SetHighlight(l_Index){ var l_objTr;
    if (document.all("arrTr").length > 1)
    l_objTr = document.all("arrTr")[l_Index];
    else
    l_objTr = document.all("arrTr"); l_objTr.className = "SelectedRow";
    }//将l_Index代表的行普通显示
    function MST_SetNormal(l_Index){ var l_objTr;
    if (document.all("arrTr").length > 1)
    l_objTr = document.all("arrTr")[l_Index];
    else
    l_objTr = document.all("arrTr"); l_objTr.className = "NormalRow";
    }//得到选中行的列表，列表中记录的是数据库中的Id，以方便后继操作
    function MST_GetSelectedList(){ var l_strList = "";
    var l_objArray = document.all("arrTr"); if (l_objArray.length > 1)
    for (var i = 0; i < l_objArray.length; i++)
    {
    if (l_objArray[i].className.toLowerCase() == "selectedrow")
    l_strList += l_objArray[i].Data + ",";
    }
    else
    if (l_objArray.className.toLowerCase() == "selectedrow")
    l_strList += l_objArray.Data + ","; //去掉末端多余逗号
    if (l_strList != "")
    l_strList = l_strList.substr(0, l_strList.length - 1); return l_strList;
    }
    //-->
    </script>
    </head><body>
    <br><br>
    <table border="1" bordercolordark="#707070" bordercolorlight="#ffffff" cellpadding="0" cellspacing="0" width="100%" class="NormalText" align="center">
      <tr bgcolor="#707070" style="{color:#FFFFFF}"><td nowrap align='center' >用户</td><td nowrap align='center'>功能模块</td><td nowrap align='center' >时间</td><td nowrap align='center' >操作</td></tr><tr class='NormalRow' id='arrTr' data='16' onClick='javascript:MST_ClickTr(0)'>
    <td align='left' nowrap valign='top'>admin</td>
    <td align='left' nowrap valign='top'>添加学生记录</td>
    <td align='center' nowrap valign='top'>2002年4月12日 17:36</td>
    <td align='left' nowrap valign='top'>添加学生<font color='#FF0000'>周涛</font>(学号：<font color='#FF0000'>98716211</font>，年级：<font color='#FF0000'>98级</font>，系所：<font color='#FF0000'>新闻传播学系</font>)</td>
    </tr>
    <tr class='NormalRow' id='arrTr' data='15' onClick='javascript:MST_ClickTr(1)'>
    <td align='left' nowrap valign='top'>admin</td>
    <td align='left' nowrap valign='top'>添加学生记录</td>
    <td align='center' nowrap valign='top'>2002年4月12日 17:35</td>
    <td align='left' nowrap valign='top'>添加学生<font color='#FF0000'>fd</font>(学号：<font color='#FF0000'>d</font>，年级：<font color='#FF0000'>99级</font>，系所：<font color='#FF0000'>社会学系</font>)</td>
    </tr>
    <tr class='NormalRow' id='arrTr' data='14' onClick='javascript:MST_ClickTr(2)'>
    <td align='left' nowrap valign='top'>admin</td>
    <td align='left' nowrap valign='top'>添加学生记录</td>
    <td align='center' nowrap valign='top'>2002年4月12日 17:32</td>
    <td align='left' nowrap valign='top'>添加学生<font color='#FF0000'>adfs</font>(学号：<font color='#FF0000'>fdas</font>，年级：<font color='#FF0000'></font>，系所：<font color='#FF0000'></font>)</td>
    </tr>
    <tr class='NormalRow' id='arrTr' data='15' onClick='javascript:MST_ClickTr(3)'>
    <td align='left' nowrap valign='top'>admin</td>
    <td align='left' nowrap valign='top'>添加学生记录</td>
    <td align='center' nowrap valign='top'>2002年4月12日 17:32</td>
    <td align='left' nowrap valign='top'>添加学生<font color='#FF0000'>adfs</font>(学号：<font color='#FF0000'>fdas</font>，年级：<font color='#FF0000'></font>，系所：<font color='#FF0000'></font>)</td>
    </tr>
    <tr class='NormalRow' id='arrTr' data='16' onClick='javascript:MST_ClickTr(4)'>
    <td align='left' nowrap valign='top'>admin</td>
    <td align='left' nowrap valign='top'>添加学生记录</td>
    <td align='center' nowrap valign='top'>2002年4月12日 17:32</td>
    <td align='left' nowrap valign='top'>添加学生<font color='#FF0000'>adfs</font>(学号：<font color='#FF0000'>fdas</font>，年级：<font color='#FF0000'></font>，系所：<font color='#FF0000'></font>)</td>
    </tr>
    </table><br></body>
    </html>
    －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
    这个程序的目的，是为了支持用户按Ctrl 或 Shift来选择多条记录。
    我的希望，就是能够在多选（按下Ctrl 或 Shift时），被选中的文本不要使用蓝色的背景（最好背景整个就不变）我现在能想出的唯一办法，就是在tr中加上 onselectstart='javascript:return false;'语句，但效果还是不理想（先按Ctrl点一次，再按Shift点就会选中了）。希望大家帮帮我，能够找到更好的解决方案。
      

  7.   

    如果只是这样的话，你在table里加onselectstart=return(false)就能达到你要的效果了
      

  8.   

    <html>
    <head>
    <title>日志维护</title>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <style type="text/css">
    .NormalRow
    {
        BACKGROUND-COLOR: Transparent;
    }
    .SelectedRow
    {
        BACKGROUND-COLOR: #cccccc;
    }
    </style>
    <script language="JavaScript">
    <!--var intLastClicked = -1;function MST_ClickTr(l_Index){    //无效参数
        if (l_Index < 0) return false;    if (event.ctrlKey){        //按下Ctrl，直接增加/去除选择
            MST_ToggleHighlight(l_Index);
            intLastClicked = l_Index;
        }else{        //没有按下Ctrl        if (event.shiftKey){        //按下Shift
                if (intLastClicked < 0){        //前面没有选择过，则直接选择当前的
                    MST_SetNormalAll();
                    MST_ToggleHighlight(l_Index);
                    intLastClicked = l_Index;
                }else{        //前面选择过，则选中所有在intLastClicked与l_Index之间的                MST_SetNormalAll();                var l_intLow    = intLastClicked < l_Index ? intLastClicked : l_Index;
                    var l_intHigh    = intLastClicked > l_Index ? intLastClicked : l_Index;                if (document.all("arrTr").length > 1)
                        for (var i = l_intLow; i <= l_intHigh; i++)
                            MST_SetHighlight(i);
                    else
                        MST_SetHighlight(0);                //intLastClicked不变
                }        }else{        //既没有按下Ctrl，又没有按下Shift，则直接选择当前的
                MST_SetNormalAll();
                MST_ToggleHighlight(l_Index);
                intLastClicked = l_Index;
            }
        }
    }//将全部行普通显示
    function MST_SetNormalAll(){    if (document.all("arrTr").length > 1)
            for (var i = 0; i < document.all("arrTr").length; i++)
                MST_SetNormal(i);
        else
            MST_SetNormal(0);
    }//切换是否被选中的状态
    function MST_ToggleHighlight(l_Index){    var l_objTr;
        if (document.all("arrTr").length > 1)
            l_objTr = document.all("arrTr")[l_Index];
        else
            l_objTr = document.all("arrTr");    if (l_objTr.className.toLowerCase() == "normalrow")
            MST_SetHighlight(l_Index);
        else
            MST_SetNormal(l_Index);
    }//将l_Index代表的行高亮显示
    function MST_SetHighlight(l_Index){    var l_objTr;
        if (document.all("arrTr").length > 1)
            l_objTr = document.all("arrTr")[l_Index];
        else
            l_objTr = document.all("arrTr");    l_objTr.className = "SelectedRow";
    }//将l_Index代表的行普通显示
    function MST_SetNormal(l_Index){    var l_objTr;
        if (document.all("arrTr").length > 1)
            l_objTr = document.all("arrTr")[l_Index];
        else
            l_objTr = document.all("arrTr");    l_objTr.className = "NormalRow";
    }//得到选中行的列表，列表中记录的是数据库中的Id，以方便后继操作
    function MST_GetSelectedList(){    var l_strList = "";
        var l_objArray = document.all("arrTr");    if (l_objArray.length > 1)
            for (var i = 0; i < l_objArray.length; i++)
            {
                if (l_objArray[i].className.toLowerCase() == "selectedrow")
                    l_strList += l_objArray[i].Data + ",";
            }
        else
            if (l_objArray.className.toLowerCase() == "selectedrow")
                l_strList += l_objArray.Data + ",";    //去掉末端多余逗号
        if (l_strList != "")
            l_strList = l_strList.substr(0, l_strList.length - 1);    return l_strList;
    }
    //-->
    </script>
    </head><body>
    <br><br>
    <table border="1" bordercolordark="#707070" bordercolorlight="#ffffff" cellpadding="0" cellspacing="0" width="100%" class="NormalText" align="center" onselectstart="javascript:return false;">
      <tr bgcolor="#707070" style="{color:#FFFFFF}"><td nowrap align='center' >用户</td><td nowrap align='center'>功能模块</td><td nowrap align='center' >时间</td><td nowrap align='center' >操作</td></tr><tr class='NormalRow' id='arrTr' data='16' onClick='javascript:MST_ClickTr(0)'>
    <td align='left' nowrap valign='top'>admin</td>
    <td align='left' nowrap valign='top'>添加学生记录</td>
    <td align='center' nowrap valign='top'>2002年4月12日 17:36</td>
    <td align='left' nowrap valign='top'>添加学生<font color='#FF0000'>周涛</font>(学号：<font color='#FF0000'>98716211</font>，年级：<font color='#FF0000'>98级</font>，系所：<font color='#FF0000'>新闻传播学系</font>)</td>
    </tr>
    <tr class='NormalRow' id='arrTr' data='15' onClick='javascript:MST_ClickTr(1)'>
    <td align='left' nowrap valign='top'>admin</td>
    <td align='left' nowrap valign='top'>添加学生记录</td>
    <td align='center' nowrap valign='top'>2002年4月12日 17:35</td>
    <td align='left' nowrap valign='top'>添加学生<font color='#FF0000'>fd</font>(学号：<font color='#FF0000'>d</font>，年级：<font color='#FF0000'>99级</font>，系所：<font color='#FF0000'>社会学系</font>)</td>
    </tr>
    <tr class='NormalRow' id='arrTr' data='14' onClick='javascript:MST_ClickTr(2)'>
    <td align='left' nowrap valign='top'>admin</td>
    <td align='left' nowrap valign='top'>添加学生记录</td>
    <td align='center' nowrap valign='top'>2002年4月12日 17:32</td>
    <td align='left' nowrap valign='top'>添加学生<font color='#FF0000'>adfs</font>(学号：<font color='#FF0000'>fdas</font>，年级：<font color='#FF0000'></font>，系所：<font color='#FF0000'></font>)</td>
    </tr>
    <tr class='NormalRow' id='arrTr' data='15' onClick='javascript:MST_ClickTr(3)'>
    <td align='left' nowrap valign='top'>admin</td>
    <td align='left' nowrap valign='top'>添加学生记录</td>
    <td align='center' nowrap valign='top'>2002年4月12日 17:32</td>
    <td align='left' nowrap valign='top'>添加学生<font color='#FF0000'>adfs</font>(学号：<font color='#FF0000'>fdas</font>，年级：<font color='#FF0000'></font>，系所：<font color='#FF0000'></font>)</td>
    </tr>
    <tr class='NormalRow' id='arrTr' data='16' onClick='javascript:MST_ClickTr(4)'>
    <td align='left' nowrap valign='top'>admin</td>
    <td align='left' nowrap valign='top'>添加学生记录</td>
    <td align='center' nowrap valign='top'>2002年4月12日 17:32</td>
    <td align='left' nowrap valign='top'>添加学生<font color='#FF0000'>adfs</font>(学号：<font color='#FF0000'>fdas</font>，年级：<font color='#FF0000'></font>，系所：<font color='#FF0000'></font>)</td>
    </tr>
    </table><br></body>
    </html>
      

  9.   

    to Andrawu(Andrawu) :
       不行啊, 这样的话, 先按Ctrl点一次，再按Shift点就会选中了, 不是很理想
      

  10.   

    to weidegong(weidegong):
       不是把,我觉得这个问题还不算太小啊,主要是选中状态下实在太难看了
      

  11.   

    我发现,加上onselectstart=return(false)之后,直接按Shift键就不会选中了,但对Ctrl键,却似乎没有什么效果,有什么解决办法吗？