JQuery function that create tables with some properties

Question

$(document).ready(function() {
  var nr = 0;
  $("#raspuns").text(nr);
  $("#t1 #e1").on({
    mouseover: function() {
      $(this).css("background-color", "yellow");
    },
    mouseleave: function() {
      $(this).css("background-color", "green");
    },
    click: function() {
      $(this).off('mouseleave');
      $("#t1 #e1").off('mouseleave');
      $("#t1 #e2").off('mouseleave');
      $("#t1 #e3").off('mouseleave');
      $("#t1 #e4").off('mouseleave');
      $(this).off('mouseover');
      $("#t1 #e1").off('mouseover');
      $("#t1 #e2").off('mouseover');
      $("#t1 #e3").off('mouseover');
      $("#t1 #e5").off('mouseover');
      $(this).off('click');
      $("#t1 #e4").off('click');
      $("#t1 #e2").off('click');
      $("#t1 #e3").off('click');
      $("#t1 #e5").off('click');
      nr = 1;
      $("#raspuns").text(nr);
    }
  });

  $("#t1 #e2").on({
    mouseover: function() {
      $(this).css("background-color", "yellow");
      $("#t1 #e1").css("background-color", "yellow");
    },
    mouseleave: function() {
      $(this).css("background-color", "green");
      $("#t1 #e1").css("background-color", "green");
    },
    click: function() {
      $(this).off('mouseleave');
      $("#t1 #e1").off('mouseleave');
      $("#t1 #e5").off('mouseleave');
      $("#t1 #e3").off('mouseleave');
      $("#t1 #e4").off('mouseleave');
      $(this).off('mouseover');
      $("#t1 #e1").off('mouseover');
      $("#t1 #e5").off('mouseover');
      $("#t1 #e3").off('mouseover');
      $("#t1 #e4").off('mouseover');
      $(this).off('click');
      $("#t1 #e4").off('click');
      $("#t1 #e1").off('click');
      $("#t1 #e3").off('click');
      $("#t1 #e5").off('click');
      nr = 2;
      $("#raspuns").text(nr);
    }
  });
  $("#t1 #e3").on({
    mouseover: function() {
      $(this).css("background-color", "yellow");
      $("#t1 #e1").css("background-color", "yellow");
      $("#t1 #e2").css("background-color", "yellow");
    },
    mouseleave: function() {
      $(this).css("background-color", "green");
      $("#t1 #e1").css("background-color", "green");
      $("#t1 #e2").css("background-color", "green");
    },
    click: function() {
      $(this).off('mouseleave');
      $("#t1 #e1").off('mouseleave');
      $("#t1 #e2").off('mouseleave');
      $("#t1 #e5").off('mouseleave');
      $("#t1 #e4").off('mouseleave');
      $(this).off('mouseover');
      $("#t1 #e1").off('mouseover');
      $("#t1 #e2").off('mouseover');
      $("#t1 #e5").off('mouseover');
      $("#t1 #e4").off('mouseover');
      $(this).off('click');
      $("#t1 #e4").off('click');
      $("#t1 #e2").off('click');
      $("#t1 #e1").off('click');
      $("#t1 #e5").off('click');
      nr = 3;
      $("#raspuns").text(nr);
    }
  });
  $("#t1 #e4").on({
    mouseover: function() {
      $(this).css("background-color", "yellow");
      $("#t1 #e1").css("background-color", "yellow");
      $("#t1 #e2").css("background-color", "yellow");
      $("#t1 #e3").css("background-color", "yellow");
    },
    mouseleave: function() {
      $(this).css("background-color", "green");
      $("#t1 #e1").css("background-color", "green");
      $("#t1 #e2").css("background-color", "green");
      $("#t1 #e3").css("background-color", "green");
    },
    click: function() {
      $(this).off('mouseleave');
      $("#t1 #e1").off('mouseleave');
      $("#t1 #e2").off('mouseleave');
      $("#t1 #e3").off('mouseleave');
      $("#t1 #e5").off('mouseleave');
      $(this).off('mouseover');
      $("#t1 #e1").off('mouseover');
      $("#t1 #e2").off('mouseover');
      $("#t1 #e3").off('mouseover');
      $("#t1 #e5").off('mouseover');
      $(this).off('click');
      $("#t1 #e1").off('click');
      $("#t1 #e2").off('click');
      $("#t1 #e3").off('click');
      $("#t1 #e5").off('click');
      nr = 4;
      $("#raspuns").text(nr);
    }
  });
  $("#t1 #e5").on({
    mouseover: function() {
      $(this).css("background-color", "yellow");
      $("#t1 #e1").css("background-color", "yellow");
      $("#t1 #e2").css("background-color", "yellow");
      $("#t1 #e3").css("background-color", "yellow");
      $("#t1 #e4").css("background-color", "yellow");
    },
    mouseleave: function() {
      $(this).css("background-color", "green");
      $("#t1 #e1").css("background-color", "green");
      $("#t1 #e2").css("background-color", "green");
      $("#t1 #e3").css("background-color", "green");
      $("#t1 #e4").css("background-color", "green");
    },
    click: function() {
      $(this).off('mouseleave');
      $("#t1 #e1").off('mouseleave');
      $("#t1 #e2").off('mouseleave');
      $("#t1 #e3").off('mouseleave');
      $("#t1 #e4").off('mouseleave');
      $(this).off('mouseover');
      $("#t1 #e1").off('mouseover');
      $("#t1 #e2").off('mouseover');
      $("#t1 #e3").off('mouseover');
      $("#t1 #e4").off('mouseover');
      $(this).off('click');
      $("#t1 #e1").off('click');
      $("#t1 #e2").off('click');
      $("#t1 #e3").off('click');
      $("#t1 #e5").off('click');
      nr = 5;
      $("#raspuns").text(nr);
    }
  });
});

div {
  height: 50px;
  width: 200px;
  background: green;
}
table {
  border-color: black;
  border-collapse: collapse;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <script>
  </script>
</head>

<body style="background-color : #90C3D4">
  <table id="t1" border="1" cellspacing="0" cellpadding="0">
    <tr>
      <td>
        <div id="e1"></div>
      </td>
    </tr>
    <tr>
      <td>
        <div id="e2"></div>
      </td>
    </tr>
    <tr>
      <td>
        <div id="e3"></div>
      </td>
    </tr>
    <tr>
      <td>
        <div id="e4"></div>
      </td>
    </tr>
    <tr>
      <td>
        <div id="e5"></div>
      </td>
    </tr>
  </table>
  <p id="raspuns"></p>
</body>

</html>

Hello guys, I did a selector that can select some parts of the table, now I want to make a function that makes 5 table with a random number of lines (ex : 5 tables with 4 lines),and if we selected from third table some elements then tables 1 and 2 automatically selects and so on, something like this

give me some ideas or some code. Thank You.

Unrelated to what you're asking, are you aware that $("#e1, #e2, #e3, #e4").off('mouseleave'); does the job of the four separate lines of code you currently have to take mouseleave off those elements? (And the rest of your long function could be similarly simplified for the other events. Actually with appropriate classes you wouldn't need separate .on() handlers either, but I don't have time to explain that now.) — nnnnnn
– nnnnnn, Commented Oct 18, 2015 at 10:50

m.s. · Accepted Answer · 2015-10-19 11:11:27Z

As someone commented, you can use multiple jQuery selectors in the same line, because you use the same action for all:

$("#e1, #e2, #e3, #e4").off('mouseleave');

Also if you want to remove all events, you can use without parameters and it will remove all events :

$("#e1, #e2, #e3, #e4, #t1").off();

Here it is how you can handle multiple jQuery elements on a single action :

var createLines = function(table, randomNumber) {
    for (var i = 1; i <= randomNumber; i++) {
        $('<tr>')
            .addClass('row' + i)
            .appendTo(table)
            .attr('isSelected', 'no')
            .click(clickFunction)
    }
};

var createTables = function(randomNumber) {
    var table = $('<table>');

    createLines(table, randomNumber);
    table.appendTo('body');
};

var clickFunction = function() {
    var $el = $(this);
    var elClass = $el.attr('class');
    var isSelected = $el.attr('isSelected');

    if (isSelected === 'yes') {
        $('.' + elClass).css('background', 'white');
        $el.attr('isSelected', 'no');
    } else {
        $('.' + elClass).css('background', 'yellow');
        $el.attr('isSelected', 'yes');
    }
};

$(document).ready(function() {
    // 1 to 10
    var randomNumber = Math.floor((Math.random() * 10) + 1);

    for (i = 1; i <= 4; i++) {
        createTables(randomNumber);
    }
});

Live example : http://jsfiddle.net/1bpmox78/

Collectives™ on Stack Overflow

JQuery function that create tables with some properties

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related