JavaScript表列选择

时间：2018-07-10 06:25:32

标签： javascript jquery html

  

更新说明：

我有一个表，该表有5列，每列有6个step。因此，我想基于这些step来匹配每一列。在。step内部，有5个列方向和1个确认文本。 step这样的代码：

<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>

首先，step默认情况下是用CSS隐藏的，而我确实首先用js代码显示了step。您可以在下面找到JS代码：

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

说step，显示Select the column that has the Facebook details，所以我应该单击表header(th)列中的任何一个，然后用当前的header(th)跨度标记替换此step文本content（Facebook）并在当前单击的表active列上添加header(th)类，并在当前matched上添加step类。像这样

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

如果我再次单击同一表header(th)列，则它将从当前单击的表active中删除header(th)类，也将从当前matched中删除step类

第一个step完成时。然后，我将单击“下一步”按钮以匹配另一列。现在还可以，但是有一个问题，当我单击表header(th)的任何列以进行匹配时，同时我可以为当前header(th)选择另一个表step的列这不是我的逻辑。但是我只想为一个header(th)选择一个step列。像单选按钮选项一样，如果我单击另一个单选选项，则先前选择的选项将被删除，而当前的选项将被选择。

我在js上出现错误，请看看并告诉我如何实现我的业务逻辑。

<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>

  

更新代码：

    $('.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');
      });
    }

2 个答案:

答案 0 :(得分：1)

希望这会满足您的要求

<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>

答案 1 :(得分：0)

我不确定您的编码标准以及业务逻辑。重用您的代码并满足您的要求。将您的代码与此代码进行比较。

对于这种情况，一次只能选择一个，则需要保持先前选择的项目的记录，以便在切换到新项目时可以删除先前的选择。 

<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>

相关问题
最新问题