使用Javascript动态更改表和行的背景颜色

Question

Snippet code copied from this link jsfiddle.net/facgwbsm

I have an app whereby when the user clicks on Add New Item button rows are added dynamically which works fine. When any number on the table is clicked it is populated dynamically in the rows. When I h over over the 1st row the background color changes to green including the corresponding match on the table which works fine .

I want when other rows are hovered on the effect on the 1st row applies to proceeding rows whereby the background color changes to green on the whole row and the corresponding inputs on the table..

 //Code to add child and input fields dynamically // Starting number of inputs let count = 5; // Wrapper const wrapper = document.querySelector('#wrapper'); document.querySelector('#btn').addEventListener('click', () => { const container = document.createElement('div'); for (let i = 0; i < 5; i++) { // Increment the count to ensure that it is unique count++; // Create your new `<input>` element const input = document.createElement('input'); input.type = 'text'; input.name = count; input.size = '4'; input.id = `inp${count}`; container.appendChild(input); // Optional: add empty whitespace after each child container.append(document.createTextNode(' ')); } wrapper.appendChild(container); }); //END code let currentInput = 1; let bonusInput = 1; $("#table1 td").on('click', function(event) { //gets the number associated with the click let num = $(this).text(); //set it to input's value attribute $("#inp" + currentInput++).attr("value", num); }); //Bonus input $("#table2").on('click', function(event) { let bon = event.target.textContent; $("#bonus" + bonusInput++).attr("value", bon); }); $("input").hover(function(event) { //alert($('#selection1 input').serialize()); //let num = $(this).attr("value"); let parent = $(this).parent(); $(parent.children()).each(function(index, element) { let num = $(element).val(); //console.log(num); if (num) { //Change input color on hover $(this).css("backgroundColor", "green"); //Change tables bgcolor on hover $("#table1 td").each(function() { if ($(this).text() === num) $(this).css("backgroundColor", "green"); }); // $("#table2 td").each(function() { // if ($(this).text() === num) $(this).css("backgroundColor","green"); // }); } }); }, function(event) { //Change input color on hover out let parent = $(this).parent(); $(parent.children()).each(function(index, element) { $(element).css("backgroundColor", "white"); }); //Change tables bgcolor on hover out $("#table1 td").each(function() { $(this).css("backgroundColor", "orange"); }); }); 

 table { border-collapse: collapse; border: 5px solid black; width: 100%; } td { width: 50%; height: 2em; border: 1px solid #ccc; background-color: orange; text-align: center; vertical-align: middle; font-weight: bold; cursor: pointer; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!--Table on the left --> <div style="width: 140px; float: left;"> <table id="table1"> <tbody> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> </tr> <tr> <td>9</td> <td>10</td> </tr> </tbody> </table> </div> <!-- Rows on the right--> <!--2nd table--> <div style="width: 140px; float: left; margin-left: 12px;"> <table id="table2"> <tbody> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> </tr> <tr> <td>9</td> <td>10</td> </tr> </tbody> </table> </div> <!-- Rows on the right--> <!-- Make sure each input has a unique id--> <div style="width: 600px; float: right;"> <div id="wrapper"> <div> <input type="text" name="1" size="4" id="inp1" value=""> <input type="text" name="2" size="4" id="inp2" value=""> <input type="text" name="3" size="4" id="inp3" value=""> <input type="text" name="4" size="4" id="inp4" value=""> <input type="text" name="5" size="4" id="inp5" value=""> + <input style="margin-left: 20px;" type="text" name="6" size="4" id="bonus1" value=""> </div> </div> <button type="button" id="btn">Add new input group</button> </div> 

Javascript code

  //Code to add child and input fields dynamically
        // Starting number of inputs
        let count = 5;

        // Wrapper
        const wrapper = document.querySelector('#wrapper');

        document.querySelector('#btn').addEventListener('click', () => {

          const container = document.createElement('div');

          for (let i = 0; i < 5; i++) {
            // Increment the count to ensure that it is unique
            count++;

            // Create your new `<input>` element
            const input = document.createElement('input');
            input.type = 'text';
            input.name = count;
            input.size = '4';
            input.id = `inp${count}`;

            container.appendChild(input);

            // Optional: add empty whitespace after each child
            container.append(document.createTextNode(' '));
          }
          wrapper.appendChild(container);
        });
       //END code

       let currentInput = 1; 
       let bonusInput = 1;

        $("#table1 td").on('click',function(event){
            //gets the number associated with the click
            let num = $(this).text(); 
            //set it to input's value attribute
            $("#inp" + currentInput++).attr("value",num); 
        });

        //Bonus input
        $("#table2").on('click',function(event){
            let bon = event.target.textContent;
            $("#bonus" + bonusInput++).attr("value",bon);
        });

        $("input").hover( function(event) {
            //alert($('#selection1 input').serialize());
            //let num = $(this).attr("value");
            let parent = $(this).parent();
            $(parent.children()).each(function (index, element) {
              let num = $(element).val();
              //console.log(num);
              if (num) {
                  //Change input color on hover
                  $(this).css("backgroundColor","red");
                  //Change tables bgcolor on hover
                  $("#table1 td").each(function() {
                      if ($(this).text() === num) $(this).css("backgroundColor","green");
                  });
                  // $("#table2 td").each(function() {
                  //     if ($(this).text() === num) $(this).css("backgroundColor","green");
                  // });
              }
           });
        }, 
        function(event) {
            //Change input color on hover out
            let parent = $(this).parent();
            $(parent.children()).each(function (index, element) {
                $(element).css("backgroundColor","white");
            });
            //Change tables bgcolor on hover out
            $("#table1 td").each(function() {
                $(this).css("backgroundColor","orange");
            }); 
        });
    </script>

Answer 1

The functions regarding the input hover and hover out only apply on the first row because the second row isn't created when the code lodes. You can fix it by adding the last part of your code to the button click:

document.querySelector('#btn').addEventListener('click', () => {

      const container = document.createElement('div');

      for (let i = 0; i < 5; i++) {
        // Increment the count to ensure that it is unique
        count++;

        // Create your new `<input>` element
        const input = document.createElement('input');
        input.type = 'text';
        input.name = count;
        input.size = '4';
        input.id = `inp${count}`;

        container.appendChild(input);

        // Optional: add empty whitespace after each child
        container.append(document.createTextNode(' '));
      }
      wrapper.appendChild(container);

      $("input").hover( function(event) {
        //alert($('#selection1 input').serialize());
        //let num = $(this).attr("value");
        let parent = $(this).parent();
        $(parent.children()).each(function (index, element) {
          let num = $(element).val();
          //console.log(num);
          if (num) {
              //Change input color on hover
              $(this).css("backgroundColor","green");
              //Change tables bgcolor on hover
              $("#table1 td").each(function() {
                  if ($(this).text() === num) $(this).css("backgroundColor","green");
              });
              // $("#table2 td").each(function() {
              //     if ($(this).text() === num) $(this).css("backgroundColor","green");
              // });
          }
       });
      }, 
      function(event) {
          //Change input color on hover out
          let parent = $(this).parent();
          $(parent.children()).each(function (index, element) {
              $(element).css("backgroundColor","white");
          });
          //Change tables bgcolor on hover out
          $("#table1 td").each(function() {
              $(this).css("backgroundColor","orange");
          }); 
      });
    });

Also, you have another issue: When clicking on numbers before adding a new row, the new row gets empty input boxes.

Answer 2

I am not sure if you really need the id's, I put that in but do not use it functionally as I used classes and thus I had no need to keep the global variables you had. I showed how to namespace those but commented them out.

I had question regarding the new row of inputs and how to determine when you click the tables where the click should place its value thus I added the concept of a focused input row delineated by the class focus-row - I gave it a border color to demonstrate which row is focused. When any input in that row is clicked or focused, it sets that focus-row that contains that input.

As for the second table and the "bonus" input - I simply used that to highlight using the value from the row being hovered there, not sure how exactly you wished to handle that but this seemed to make the most sense to me.

Now, as to the point where you add a new input row, rather than keeping track of the global variables, I simply cloned the first input row and cleared its values and set the id and name attribute there. Since I attached the event handlers to the wrapper, you are able to add new input rows without dealing with re-attaching.

NOTE: you could put the hover on the row using input-group instead of the inputs to avoid "flash" when moving from input to input on the same row but I left that as you had it.

I used myApp.wrapper.on('mouseenter', and the mouseleave it really is functionally the same as the .hover but it made it a bit cleaner when I chained in the .on('click focus' for the row focus. You could for example add a button to the input row <button class="set-row-focus">Focus Row</button> or add that class to the input-group and then trigger a custom event on a click of that to the focus/click event handler like this:set event: .on('click focus setfocus' then trigger it $('.set-row-focus').on('click',function(){$(this).siblings('.normal-input').first().trigger('setfocus');});

 $(function() { // namespace globals var myApp = myApp || { //count: 5, //currentInput: 1, // bonusInput: 1, wrapper: $('#wrapper'), table1: $("#table1"), table2: $("#table2") }; $('#btn').on('click', function(event) { //Code to add child and input fields dynamically const groups = myApp.wrapper.find('.input-group'); const newGroup = groups.first().clone(true).removeClass('focus-row'); newGroup.find('input') //only if you really need id's .each(function(index) { let newId = $(this).is(".normal-input") ? "inp" + groups.length + index : "bonus" + groups.length; $(this).attr("name", newId) .attr("id", newId).val(''); }); newGroup.appendTo(myApp.wrapper); }); myApp.table1.on('click', 'td', function(event) { //gets the number associated with the click let num = $(this).text(); $('.focus-row').find('.normal-input').filter(function() { return this.value.length === 0; }).first().val(num); }); //Bonus input myApp.table2.on('click', 'td', function(event) { let bon = $(this).text(); $('.focus-row').find('.bonus-input').val(bon); }); myApp.wrapper.on('mouseenter', 'input', function(event) { let inputs = $(this).closest('.input-group') .find('input') .filter(function(index) { return !!($(this).val()); }) .each(function(index) { let num = $(this).val(); //Change input color on hover $(this).toggleClass('mark-hover', true); let pairTable = {}; if ($(this).is('.normal-input')) { pairTable = myApp.table1; } if ($(this).is('.bonus-input')) { pairTable = myApp.table2; } pairTable.find('td') .filter(function(index) { return $(this).text() == num; }) .toggleClass('mark-hover', true); }); }).on('mouseleave', 'input', function(event) { //remove class on hover out $(this).closest('.input-group') .find('input') .toggleClass('mark-hover', false); //removes class in tables on hover out myApp.table1.add(myApp.table2) .find('td') .toggleClass("mark-hover", false); }) // sets the focus row .on('click focus', 'input', function() { $('.input-group').removeClass('focus-row'); $(this).closest('.input-group') .addClass('focus-row') }); }); 

 table { border-collapse: collapse; border: 5px solid black; width: 100%; } .table-wrapper { width: 140px; float: left; } .inputs-container { width: 100%; float: right; } .inputs-container input { margin-right: 0.3em; } .inputs-container .bonus-input { margin-left: 20px; } .focus-row { border: solid 1px lime; } td { width: 50%; height: 2em; border: 1px solid #ccc; background-color: orange; text-align: center; vertical-align: middle; font-weight: bold; cursor: pointer; } td.mark-normal { background-color: orange; } .mark-hover { background-color: lightgreen; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <!--Table on the left --> <div class="table-wrapper"> <table id="table1"> <tbody> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> </tr> <tr> <td>9</td> <td>10</td> </tr> </tbody> </table> </div> <!-- Rows on the right--> <!--2nd table--> <div class="table-wrapper" style="margin-left: 12px;"> <table id="table2"> <tbody> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> <tr> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> </tr> <tr> <td>9</td> <td>10</td> </tr> </tbody> </table> </div> <!-- Rows on the right--> <!-- Make sure each input has a unique id--> <div class="inputs-container"> <div id="wrapper"> <div class="input-group focus-row"> <input class="normal-input" type="text" name="1" size="4" id="inp1" value=""> <input class="normal-input" type="text" name="2" size="4" id="inp2" value=""> <input class="normal-input" type="text" name="3" size="4" id="inp3" value=""> <input class="normal-input" type="text" name="4" size="4" id="inp4" value=""> <input class="normal-input" type="text" name="5" size="4" id="inp5" value=""> + <input class="bonus-input" type="text" name="6" size="4" id="bonus0" value=""> </div> </div> <button type="button" id="btn">Add new input group</button> </div>