CODEWITHSUNDEEP
javascripthtmlcss
John_F
John_F

Reputation: 111

I have table rows selected with up and down arrows but want to be able to click them too

I have table rows selected with up and down arrows working but want to be able to click them too. When I click on a row nothing then shows as selected currently. I also want to be able to use the content of the first cell of the last selected row as part of the URL in the buttons underneath. Can anyone help? Here is the code I have so far: 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>

Upvotes: 0

Views: 170

Answers (1)

Mobius
Mobius

Reputation: 2896

JavaScript passes an event object as the first argument to click handlers. This makes the first argument to highlightRow an event object instead of a falsy value so that you could default it to this.

the code below fixes that problem by simply wrapping the click handler like so

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>

EDIT The actions have been updated to pull from the selected table row.

Upvotes: 1

Related Questions