Javascript Table Column Selection

Question

Update Explanation:

I have a table and which has 5 columns and I have 6 step for each column. So I want to match each column based on these step. Inside .step have 5 column direction and one confirmation text. step code like this :

<div class="table_required">
  <div class="column facebook">Select the column that has the <span>Facebook</span> details</div>
  <div class="column twitter">Select the column that has the <span>Twitter</span> details</div>
  <div class="column youtube">Select the column that has the <span>Youtube</span> details</div>
  <div class="column gplus">Select the column that has the <span>GPlus</span> details</div>
  <div class="column instagram">Select the column that has the <span>Instagram</span> details</div>
  <div class="column confirm">Please Check the all column</div>
</div>

First of all , step are hidden by default with CSS and I did show first step with js code. You can find the JS code below:

$('.column.facebook').fadeIn('fast');

Say step showing Select the column that has the Facebook details so I should click any of table header(th) column and then this header(th) text will be replaced with the current step span tag content(Facebook) and add active class on current clicked table header(th) column and add matched class on current step. Like this

<div class="column facebook matched">Select the column that has the <span>Facebook</span> details</div>

If I click again on same table header(th) column then it will remove active class from current clicked table header(th) also remove matched class from current step.

When the first step is complete. Then I'll click next button to match another column. For now, it's ok and but there is one problem, when I click any of table header(th) column to match , at the same time I can select another table header(th) column for current step which is not my logic. But I want to select only one header(th) column for one step. Like Radio button option, if i click another radio option then previous selected option will be remove and current one will be selected.

I have some error on js , please have a look and tell how to achieve my business logic.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
td,th {border: 1px solid #000; cursor: pointer; }
.column { display: none; }
.active { background: red; }
span { color: red; font-weight: bold;}
button { padding: 10px 18px; background: red; cursor: pointer;}
.matched { background: green; }
</style>

<div class="table_required">
<div class="column facebook">Select the column that has the <span>Facebook</span> details</div>
<div class="column twitter">Select the column that has the <span>Twitter</span> details</div>
<div class="column youtube">Select the column that has the <span>Youtube</span> details</div>
<div class="column gplus">Select the column that has the <span>GPlus</span> details</div>
<div class="column instagram">Select the column that has the <span>Instagram</span> details</div>
<div class="column confirm">Please Check the all column</div>
</div>
<br>

<table id="table">
<thead>
  <tr>
    <th>Column 0</th>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
    <th>Column 4</th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>Facebook 0</td>
    <td>Twitter 0</td>
    <td>Youtube 0</td>
    <td>GPlus 0</td>
    <td>Instagram 0</td>
  </tr>

  <tr>
    <td>Facebook 1</td>
    <td>Twitter 1</td>
    <td>Youtube 1</td>
    <td>GPlus 1</td>
    <td>Instagram 1</td>
  </tr>

  <tr>
    <td>Facebook 2</td>
    <td>Twitter 2</td>
    <td>Youtube 2</td>
    <td>GPlus 2</td>
    <td>Instagram 2</td>
  </tr>
</tbody>
</table>

<br>
<div class="button">
  <button class="next">Next</button>
</div>

<script>
$('.column.facebook').fadeIn('fast');
$('#table').on('click', 'th', function (e) {
    var col_indx = parseInt($(e.currentTarget).index()) + 1;

    $('.table_required .column').each(function () {
    var next_cls = $(this).next().find('span').text().toLowerCase();
    
        if ($(this).is(":visible")) {
            $(e.currentTarget).addClass('active').text($(this).find('span').text());

            var column = $(e.currentTarget).text();
            var rgxp = new RegExp(column, 'gi');

            if ($(this).find('span').text().match(rgxp)) {

                if (!$(this).hasClass('matched')) {
                    $(this).addClass('matched');
                    
                    if (next_cls) {
                        $(".next").attr('class', 'next ' + next_cls);
                    } else {
                        $(".next").attr('class', 'next confirm');
                    }
                } else {
                    $(this).removeClass('matched');

                    $(".next").attr('class', 'next');

                    $(e.currentTarget).removeClass('active').text('Column ' + parseInt(col_indx - 1));
                }
            }
        }
    });
});

next_click('twitter');
next_click('youtube');
next_click('gplus');
next_click('instagram');
next_click('confirm');

function next_click(selector) {
  $('.button').on('click', '.next.' + selector, function (e) {
      $('.table_required .column').each(function () {
          $(this).hide('fast');
      });
      
      if(selector == 'confirm') {
        $(this).html('Submit');
      }
      
      $(".table_required .column." + selector).fadeIn('fast').removeClass('matched');
  });
}
</script>

Updated Code:

    $('.column.facebook').fadeIn('fast');
    $('#table').on('click', 'th', function (e) {
        var col_indx = parseInt($(e.currentTarget).index()) + 1;

        $('.table_required .column').each(function () {
            var next_cls = $(this).next().find('span').text().toLowerCase();

            if ($(this).is(":visible")) {
                if (!$(this).hasClass('matched') && !$(e.currentTarget).hasClass('active')) {
                    $(this).addClass('matched');

                    $(e.currentTarget).addClass('active').text($(this).find('span').text());

                    var column = $(e.currentTarget).text();
                    var rgxp = new RegExp(column, 'gi');

                    if ($(this).find('span').text().match(rgxp)) {
                        if (next_cls) {
                            $(".next").attr('class', 'next ' + next_cls);
                        } else {
                            $(".next").attr('class', 'next confirm' );
                        }
                    }
                } else {
                    $(this).removeClass('matched');

                    $('th:nth-child(' + col_indx + ')', $(e.currentTarget).closest('table')).removeClass('active').text('Column ' + parseInt(col_indx - 1));

                    if (next_cls) {
                        $(".next").attr('class', 'next' );
                    } else {
                        $(".next").attr('class', 'next' );
                    }
                }
            }
        });
    });

    next_click('twitter');
    next_click('youtube');
    next_click('gplus');
    next_click('instagram');
    next_click('confirm');

    function next_click(selector) {
      $('.button').on('click', '.next.' + selector, function (e) {
          $('.table_required .column').each(function () {
              $(this).hide('fast');
          });

          if(selector == 'confirm') {
            $(this).html('Submit');
          }

          $(".table_required .column." + selector).fadeIn('fast').removeClass('matched');
      });
    }

Honey · Accepted Answer · 2018-07-12 05:39:26Z

Hope this will meet your requirement

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
td,th {border: 1px solid #000; cursor: pointer; }
.column { display: none; }
.active { background: red; }
span { color: red; font-weight: bold;}
button { padding: 10px 18px; background: red; cursor: pointer;}
.matched { background: green; }
</style>

<div class="table_required">
<div class="column facebook">Select the column that has the <span>Facebook</span> details</div>
<div class="column twitter">Select the column that has the <span>Twitter</span> details</div>
<div class="column youtube">Select the column that has the <span>Youtube</span> details</div>
<div class="column gplus">Select the column that has the <span>GPlus</span> details</div>
<div class="column instagram">Select the column that has the <span>Instagram</span> details</div>
<div class="column confirm">Please Check the all column</div>
</div>
<br>

<table id="table">
<thead>
<tr>
<th>Column 0</th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>

<tbody>
<tr>
<td>Facebook 0</td>
<td>Twitter 0</td>
<td>Youtube 0</td>
<td>GPlus 0</td>
<td>Instagram 0</td>
</tr>

<tr>
<td>Facebook 1</td>
<td>Twitter 1</td>
<td>Youtube 1</td>
<td>GPlus 1</td>
<td>Instagram 1</td>
</tr>

<tr>
<td>Facebook 2</td>
<td>Twitter 2</td>
<td>Youtube 2</td>
<td>GPlus 2</td>
<td>Instagram 2</td>
</tr>
</tbody>
</table>

<br>
<div class="button">
<button class="next">Next</button>
</div>

<script>
$('.column.facebook').fadeIn();
$(".next").prop("disabled",true);
var that = null;
$("#table th").click(function(){
	if($(this).hasClass('active'))
		return false;
	$(".next").prop("disabled",false);
	var stepSpan = $(".column:visible > span").text();
	if(that)
		that.removeClass('active').text("Column "+ that.index())
	that = $(this);
	that.addClass('active').text(stepSpan);
	$(".column:visible").addClass("matched");
});
$(".next").click(function(){
	if($("#table th.active").length <5){
		$(".column:visible").removeClass("matched").hide().next().fadeIn();
		$(".next").prop("disabled",true);
		that = null;
	}
	else{
		console.log("Submit")// add final click logic here
	}
});
</script>

Honey · Accepted Answer · 2018-07-10 13:03:49Z

I'm not sure about your coding standard as well business logic. Reused your code and met your requirement. compare your code with this code.

For this kind of scenario only to select any one at a time, need to keep the track of previously selected item so that we can remove the previous selection when we switch to new one.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
td,th {border: 1px solid #000; cursor: pointer; }
.column { display: none; }
.active { background: red; }
span { color: red; font-weight: bold;}
button { padding: 10px 18px; background: red; cursor: pointer;}
.matched { background: green; }
</style>

<div class="table_required">
<div class="column facebook">Select the column that has the <span>Facebook</span> details</div>
<div class="column twitter">Select the column that has the <span>Twitter</span> details</div>
<div class="column youtube">Select the column that has the <span>Youtube</span> details</div>
<div class="column gplus">Select the column that has the <span>GPlus</span> details</div>
<div class="column instagram">Select the column that has the <span>Instagram</span> details</div>
<div class="column confirm">Please Check the all column</div>
</div>
<br>

<table id="table">
<thead>
<tr>
<th>Column 0</th>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
</tr>
</thead>

<tbody>
<tr>
<td>Facebook 0</td>
<td>Twitter 0</td>
<td>Youtube 0</td>
<td>GPlus 0</td>
<td>Instagram 0</td>
</tr>

<tr>
<td>Facebook 1</td>
<td>Twitter 1</td>
<td>Youtube 1</td>
<td>GPlus 1</td>
<td>Instagram 1</td>
</tr>

<tr>
<td>Facebook 2</td>
<td>Twitter 2</td>
<td>Youtube 2</td>
<td>GPlus 2</td>
<td>Instagram 2</td>
</tr>
</tbody>
</table>

<br>
<div class="button">
<button class="next">Next</button>
</div>

<script>
$('.column.facebook').fadeIn('fast');
var col_indxCopy;
$('#table').on('click', 'th', function (e) {

    if(!!col_indxCopy){
        console.log($( "#table th:eq( "+ parseInt(col_indxCopy-1)+" )" ))

       $( "#table th:eq( "+ parseInt(col_indxCopy-1)+" )" ).removeClass('active').text('Column ' + parseInt(col_indxCopy-1));
    }

    var col_indx = parseInt($(e.currentTarget).index()+1);
    $('.table_required .column').each(function () {
    var next_cls = $(this).next().find('span').text().toLowerCase();
    
        if ($(this).is(":visible")) {

            if(!$(e.currentTarget).hasClass('active') && !$(this).hasClass('matched'))
            $(e.currentTarget).addClass('active').text($(this).find('span').text());
            else
            $(e.currentTarget).removeClass('active').text('Column ' + parseInt(col_indx-1));
           
            var column = $(e.currentTarget).text();
            var rgxp = new RegExp(column, 'gi');

            if ($(this).find('span').text().match(rgxp)) {

                if (!$(this).hasClass('matched')) {
                    $(this).addClass('matched');
                    
                    if (next_cls) {
                        $(".next").attr('class', 'next ' + next_cls);
                    } else {
                        $(".next").attr('class', 'next confirm');
                    }
                } else {
                    if(col_indxCopy == col_indx){
                     $(this).removeClass('matched');

                    $(".next").attr('class', 'next');
                    }
                   

                  
                }
            }
            // if($(e.currentTarget).hasClass('active'))
            //   
        }
    });
    col_indxCopy = col_indx;
});

next_click('twitter');
next_click('youtube');
next_click('gplus');
next_click('instagram');
next_click('confirm');

function next_click(selector) {
  $('.button').on('click', '.next.' + selector, function (e) {
      $('.table_required .column').each(function () {
          $(this).hide('fast');
      });
      
      if(selector == 'confirm') {
        $(this).html('Submit');
      }
      
      $(".table_required .column." + selector).fadeIn('fast').removeClass('matched');
  });
}
</script>

do you want to remove the previous selected column when select another column on same step? Like radio button option

Collectives™ on Stack Overflow

Javascript Table Column Selection

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related