Question

我选择了带有向上和向下箭头的表格行但是也希望能够点击它们。当我点击一行时，没有任何内容显示为当前选中。我还希望能够将最后一个选定行的第一个单元格的内容用作下面按钮中URL的一部分。有人可以帮忙吗？这是我到目前为止的代码： Javascript，css，html

(
function() {
  var trows = document.getElementById("mstrTable").rows;
  var selectedRow = 1;

  for (var t = 1; t < trows.length; ++t) {
    trow = trows[t];
    trow.className = t === 1 ? "highlighted" : "normal";
    trow.onclick = highlightRow;
  }//end for

  function highlightRow(rowObj, index) {
    rowObj = rowObj || this;
    index = index || selectedRow;
    trows[index].className = "normal";
    rowObj.className = "highlighted";
    selectedRow = rowObj.rowIndex;
  }//end function

  function kbNavigate(evt) {
    evt = evt || window.event;
    var key = evt.keyCode;
    switch (key) {
      case 38: // UP arrow
        if(selectedRow === 1) return;
        highlightRow(trows[selectedRow-1], selectedRow);
        break;
      case 40: // DOWN arrow
        if(selectedRow === trows.length-1) return;
        highlightRow(trows[selectedRow+1], selectedRow);
        break;
    }
  }

  document.onkeydown = kbNavigate;
}//end function
)();//end script

body {background: #000042;}

.cas {
        font-size: 20pt;
        /*font-family: fixedsys, LucidaTerminal, monospace;*/
        font-family: Courier, monospace;
        color: Gold;
}

cas_h1 {
        font-size: 30pt;
}

table {
        border-collapse: collapse;
}

table, th, td {
        border: 2px solid Gold;
        color: Gold;
        padding: 8px;

}

td, th {
        font-size: 20pt;
        /*font-family: fixedsys, LucidaTerminal, monospace;*/
        font-family: Courier, monospace;
}

.cont {
        border: none;
}

tr.normal td {
        color: Gold;
        background-color: #000042;
}
tr.highlighted td {
        color: black;
        background-color: OliveDrab;
        font-weight: bold;
}

<html>
<head>
<title>cas</title>
<link href="cas.css" rel="stylesheet" type="text/css">
</head>
<body>
<center>
<p class='cas'>
<br>
<cas_h1>CAS</cas_h1><br>
<br>
<table class='cont'>
<tr>
<td class='cont'>

<table id="mstrTable">
<thead>
<tr>
<td>Order</td>
<td>Customer</td>
</tr>
</thead>
<tbody>
<td>1234567</td>
<td>Smith</td>
</tr>
<td>1234566</td>
<td>Smith</td>
</tr>
</tbody>
</table>

</td>
</tr>
<tr>
<td class='cont'>
<button type='button' style='height: 30px;width: 80px' onclick='window.location.href="action1.php?order=1234567"'>Action 1</button>
<button type='button' style='height: 30px;width: 80px' onclick='window.location.href="action2.php?order=1234567"'>Action 2</button>
</td>
</tr>
</table>
</p>
</center>
<script type="text/javascript" src="cas_table.js"></script>
</body>
</html>

Answer 1

JavaScript将事件对象作为click处理程序的第一个参数传递。这使得highlightRow的第一个参数成为事件对象而不是假值，因此您可以将其默认为this。

下面的代码通过简单地包装单击处理程序来解决这个问题

trow.onclick = function(e){ highlightRow(this); };

(
function() {
 
  var trows = document.getElementById("mstrTable").rows;
  var selectedRow = 1;

  for (var t = 1; t < trows.length; ++t) {
    trow = trows[t];
    trow.className = t === 1 ? "highlighted" : "normal";
    // wrap the click handler to achieve the desired behavior.
    trow.onclick = function(e){highlightRow(this)}; 
  }//end for
  
  // add action handlers
  document.querySelector('.action.action1').addEventListener('click', navigate('action1'));
  document.querySelector('.action.action2').addEventListener('click', navigate('action2'));
        
  function navigate(action){
    return function(){
      var row = trows[selectedRow];
      // querySelector gets the first matching item
      // so the following code will get the contents of the 
      // first cell of the selected row.
      var order = row.querySelector('td').innerHTML;
      var url = action + '.php?order=' + order;
      alert(url);
      // window.location.href = url;
     }
  }
    
  function highlightRow(rowObj, index) {
    rowObj = rowObj || this;
    index = index || selectedRow;
    trows[index].className = "normal";
    rowObj.className = "highlighted";
    selectedRow = rowObj.rowIndex;
  }//end function

  function kbNavigate(evt) {
    evt = evt || window.event;
    var key = evt.keyCode;
    switch (key) {
      case 38: // UP arrow
        if(selectedRow === 1) return;
        highlightRow(trows[selectedRow-1], selectedRow);
        break;
      case 40: // DOWN arrow
        if(selectedRow === trows.length-1) return;
        highlightRow(trows[selectedRow+1], selectedRow);
        break;
    }
  }

  document.onkeydown = kbNavigate;
}//end function
)();//end script

body {background: #000042;}

.cas {
        font-size: 20pt;
        /*font-family: fixedsys, LucidaTerminal, monospace;*/
        font-family: Courier, monospace;
        color: Gold;
}

cas_h1 {
        font-size: 30pt;
}

table {
        border-collapse: collapse;
}

table, th, td {
        border: 2px solid Gold;
        color: Gold;
        padding: 8px;

}

td, th {
        font-size: 20pt;
        /*font-family: fixedsys, LucidaTerminal, monospace;*/
        font-family: Courier, monospace;
}

.cont {
        border: none;
}

tr.normal td {
        color: Gold;
        background-color: #000042;
}
tr.highlighted td {
        color: black;
        background-color: OliveDrab;
        font-weight: bold;
}

<html>
<head>
<title>cas</title>
<link href="cas.css" rel="stylesheet" type="text/css">
</head>
<body>
<center>
<p class='cas'>
<br>
<cas_h1>CAS</cas_h1><br>
<br>
<table class='cont'>
<tr>
<td class='cont'>

<table id="mstrTable">
<thead>
<tr>
<td>Order</td>
<td>Customer</td>
</tr>
</thead>
<tbody>
<td>1234567</td>
<td>Smith</td>
</tr>
<td>1234566</td>
<td>Smith</td>
</tr>
</tbody>
</table>

</td>
</tr>
<tr>
<td class='cont'>
<button type='button' style='height: 30px;width: 80px'  class="action action1">Action 1</button>
<button type='button' class="action action2" style='height: 30px;width: 80px'>Action 2</button>
</td>
</tr>
</table>
</p>
</center>
<script type="text/javascript" src="cas_table.js"></script>
</body>
</html>

编辑已更新操作以从选定的表格行中提取。

我有用向上和向下箭头选择的表格行，但也希望能够点击它们

1 个答案: