• 所有问题

    • javascript做一个表格。

    要求onclick一行将其设置为高亮，点击其它行后也设为高亮，原先的高亮行取消效果，。简而言之就是点击哪行，哪行就得显示高亮，并且同一时间只有一行显示高亮。求大神帮忙

    举报该问题
    推荐答案   推荐于2016-02-12
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <title>原生JavaScript版表格行点击高亮</title>
      <meta name="Generator" content="EditPlus">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
     </head>
     <style type="text/css">
    table,tr,td{
    border:1px solid #ccc;
    border-collapse:collapse;
    }
    td{
    line-height:24px;
    height:24px;
    padding:0 10px;
    }
     </style>
    <script type="text/javascript">
    <!--
    function highLight(tab){
    var rows = tab.rows;
    for(var i=0, len=rows.length; i<len ;i++){
    rows[i].onclick = function(){
    for(var j=0;j<len;j++){
    rows[j].style.backgroundColor = "";
    this.style.backgroundColor = "#00f";
    }
    }
    }
    }

    window.onload = function(){
    highLight(document.getElementsByTagName('table')[0]);
    }
    //-->
    </script>
     <body>
      <table>
    <tr>
    <td>aaaa</td>
    <td>bbbb</td>
    <td>cccc</td>
    <td>dddd</td>
    <td>eeee</td>
    </tr>
    <tr>
    <td>aaaa</td>
    <td>bbbb</td>
    <td>cccc</td>
    <td>dddd</td>
    <td>eeee</td>
    </tr>
    <tr>
    <td>aaaa</td>
    <td>bbbb</td>
    <td>cccc</td>
    <td>dddd</td>
    <td>eeee</td>
    </tr>
    <tr>
    <td>aaaa</td>
    <td>bbbb</td>
    <td>cccc</td>
    <td>dddd</td>
    <td>eeee</td>
    </tr>
    <tr>
    <td>aaaa</td>
    <td>bbbb</td>
    <td>cccc</td>
    <td>dddd</td>
    <td>eeee</td>
    </tr>
    <tr>
    <td>aaaa</td>
    <td>bbbb</td>
    <td>cccc</td>
    <td>dddd</td>
    <td>eeee</td>
    </tr>
    <tr>
    <td>aaaa</td>
    <td>bbbb</td>
    <td>cccc</td>
    <td>dddd</td>
    <td>eeee</td>
    </tr>
      </table>
     </body>
    </html>


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
     <head>
      <title>jQuery版表格行点击高亮</title>
      <meta name="Generator" content="EditPlus">
      <meta name="Author" content="">
      <meta name="Keywords" content="">
      <meta name="Description" content="">
     </head>
     <style type="text/css">
    table,tr,td{
    border:1px solid #ccc;
    border-collapse:collapse;
    }
    td{
    line-height:24px;
    height:24px;
    padding:0 10px;
    }
     </style>
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
    <!--
    $(function(){
    $('table tr').bind('click',function(){
    $(this).siblings().css('background-color','').end().css('background-color','#00f');
    });
    });
    //-->
    </script>
     <body>
      <table>
    <tr>
    <td>aaaa</td>
    <td>bbbb</td>
    <td>cccc</td>
    <td>dddd</td>
    <td>eeee</td>
    </tr>
    <tr>
    <td>aaaa</td>
    <td>bbbb</td>
    <td>cccc</td>
    <td>dddd</td>
    <td>eeee</td>
    </tr>
    <tr>
    <td>aaaa</td>
    <td>bbbb</td>
    <td>cccc</td>
    <td>dddd</td>
    <td>eeee</td>
    </tr>
    <tr>
    <td>aaaa</td>
    <td>bbbb</td>
    <td>cccc</td>
    <td>dddd</td>
    <td>eeee</td>
    </tr>
    <tr>
    <td>aaaa</td>
    <td>bbbb</td>
    <td>cccc</td>
    <td>dddd</td>
    <td>eeee</td>
    </tr>
    <tr>
    <td>aaaa</td>
    <td>bbbb</td>
    <td>cccc</td>
    <td>dddd</td>
    <td>eeee</td>
    </tr>
    <tr>
    <td>aaaa</td>
    <td>bbbb</td>
    <td>cccc</td>
    <td>dddd</td>
    <td>eeee</td>
    </tr>
      </table>
     </body>
    </html>

    温馨提示：答案为网友推荐，仅供参考
    相似回答
    javascript动态生成表格显示答： function create() { // 使用 $("") 生成一个 table var tab = $("");// 3 行循环3次 for (var i = 1; i <= 3; i++) { // 每次生成一个 var row = $("");// 4 列循环 4 次 for (var j = 1; j <= 4; j++) { // 给 append（添加） i行j列 row....
    用js怎么建表格答：1．在页面div中创建一个空白表，可以根据需要对其进行定制。2．创建表之后，我们可以编写关键代码来动态生成表。我们编写了一个js方法来触发使用。3.在< TB >标签中，我们添加了标签，主要用于提供用户输入参数，而全局变量num主要用于区分每个添加参数的唯一id。4．获取表中的数据，以供下图参考。5．一...
    只用js如何实现表格内容的动态修改?答： //定义一个table var tb = document.getElementById('test');//获取表格的dom节点 var td = tb.rows[0].cells[0];//获取0行0列的td单元格 td.innerHTML = '222';//动态修改表格的内容为222 思路：1、获取表格的dom节点 2、通过rows和cells定位td单元格 3、通过修改innerHTM...
    JavaScript写一个5×6表格,表格内是这个格子的行列数(第。行第。列)答： window.onload=function(){ var table="";for(var i=1;i<6;i++){ table+="";for(var j=1;j<7;j++){ table+="第"+i+"行第"+j+"列";} table+="";} table+="";document.body.innerHTML=table;}
    用javascript编写:输入几行几列 就生成几行几列的一个表格 的程序怎么...答：= document.createElement('td');node = document.createTextNode(line + row);rele.appendChild(node);lele.appendChild(rele);} parent.appendChild(lele);} } 调用上面的函数，输入行列数量，就可以生成表格了。默认是在body下面生成的，你可以根据你自己的需要修改parent，以将table到对应元素下。
    大家正在搜
    javascript做表格javascript能做app吗javascript怎么做javascript可以做后端吗javascript可以做什么javascript做网页怎么用javascript做网页javascript除了做网页js和javascript
    相关问题
    怎么用js做一个表格
    如何通过javascript脚本在一个HTML页面上创建一个...
    利用javascript,做一个动态表格
    如何使用JavaScript创建一个动态表格
    JavaScript生成一个简单的表格
    JavaScript生成一个简单的表格
    用JavaScript制作一个表单
    在JS脚本中插入一个表格该怎么写呢？