Complete instance of javascript mouse slide scoring control

2020-06-12 08:34:06
OfStack

This article is an example of the javascript mouse slide scoring control. Share to everybody for everybody reference. Specific implementation methods are as follows:


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript Mouse slide control </title>
<script type="text/javascript">
function ArrayIndexof(arr, inElement) {
  for (var i = 0; i < arr.length; i++) {
 if (arr[i] == inElement) {
   return i;
 }
  }
  return -1;
}
function GetTDS() {
  var tbl = document.getElementById("tblMain");
  var tds = tbl.getElementsByTagName("td");
  return tds;      
}
function iniEvent() {
  var tds = GetTDS();
  for (var i = 0; i < tds.length; i++) {
 td = tds[i];
 td.onmouseover = TdOnMouseOver;
  }
  var tbl = document.getElementById("tblMain");
  tbl.onmouseout = TableMouseOut;
}
function SetRating(tdTmp) {
  var tds = GetTDS();
  var index = ArrayIndexof(tds, tdTmp);
  for (var i = 0; i <= index; i++) {
 td = tds[i];
 td.innerHTML = " u ";
  }
  for (var i = index + 1; i < tds.length; i++) {
 td = tds[i];
 td.innerHTML = " Do things ";
  }
}
function TdOnMouseOver() {
  SetRating(this);
}
// Automatically clears after the mouse has left the table 
function TableMouseOut() {
  var tds = GetTDS();
  for (var i = 0; i < tds.length; i++) {
 td = tds[i];
 td.innerHTML = " Do things ";         
  }
}
</script>
</head>
<body onload="iniEvent()">
<table id="tblMain" border="1">
<tr>
  <td> Do things </td>
  <td> Do things </td>
  <td> Do things </td>
  <td> Do things </td>
  <td> Do things </td>
</tr>
</table>
</body>
</html>

Hopefully, this article has been helpful in your javascript programming.