Javascript表列选择

更新说明：

我有一个表，它有5列，每列有6个

step

。所以我想根据这些

步骤

匹配每一列。内部。

步骤

有5列方向和一个确认文本<代码>步骤如下代码：

<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

showing

选择包含Facebook详细信息的列

，因此我应该单击表

header（th）

列中的任何一列，然后该

header（th）

文本将替换为当前

step

span标记内容（Facebook），并在当前单击的表

header上添加
active
类（th）

列并在当前

步骤中添加
匹配的
类

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

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

对于这种一次只选择一个项目的场景，需要跟踪以前选择的项目，以便在切换到新项目时删除以前的选择



td，th{border:1px solid#000；cursor:pointer；}
.列{显示：无；}
.active{背景：红色；}
span{颜色：红色；字体大小：粗体；}
按钮{填充：10px 18px；背景：红色；光标：指针；}
.matched{背景：绿色；}
选择包含Facebook详细信息的列
选择包含Twitter详细信息的列
选择包含Youtube详细信息的列
选择包含GPlus详细信息的列
选择包含Instagram详细信息的列
请检查“全部”列


第0列
第1栏
第2栏
第3栏
第4栏
Facebook 0
推特0
Youtube 0
gplus0
Instagram 0
Facebook 1
推特1
Youtube 1
GPlus 1
Instagram 1
Facebook 2
推特2
Youtube 2
GPlus 2
Instagram 2


下一个
$（'.column.facebook'）.fadeIn（'fast'）；
var colu_indxCopy；
$（'#table'）。在（'click'，'th'，函数（e）上{
如果（！！col_indxCopy）{
log（$（“#表th:eq（“+parseInt（col#indxCopy-1）+”））
$（“#表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'）。每个（函数（）{
var next_cls=$（this）.next（）.find（'span'）.text（）.toLowerCase（）；
如果（$（this）.is（“：可见”））{
if（！$（e.currentTarget）.hasClass（'active'）&（！$（this.hasClass（'matched'））
$（e.currentTarget）.addClass（'active'）.text（$（this.find（'span'）.text（））；
其他的
$（e.currentTarget）.removeClass（'active'）.text（'Column'+parseInt（col_indx-1））；
var column=$（e.currentTarget）.text（）；
var rgxp=新的RegExp（列'gi'）；
if（$（this）.find（'span'）.text（）.match（rgxp））{
if（！$（this）.hasClass（'matched'））{
$（this.addClass（'matched'）；
如果（下一次）{
$（“.next”）.attr（'class'，'next'+next_cls）；
}否则{
$（“.next”）.attr（'class'，'next confirm'）；
}
}否则{
if（col_indxCopy==col_indx）{
$（this.removeClass（'matched'）；
$（“.next”）.attr（'class'，'next'）；
}
}
}
//if（$（e.currentTarget）.hasClass（'active'））
//   
}
});
col_indxCopy=col_indx；
});
下一步单击（“推特”）；
下一步单击（“youtube”）；
下一步单击（“GPLU”）；
下一步单击（“instagram”）；
下一步单击（“确认”）；
功能下一步单击（选择器）{
$（'.button'）。在（'单击'，'下一步'）+选择器，函数（e）{
$（'.table_required.column'）。每个（函数（）{
$（this.hide（'fast'）；
});
如果（选择器==“确认”）{
$（this.html（'Submit'）；
}
$（“.table_required.column.”+选择器）.fadeIn（'fast'）.removeClass（'matched'）；
});
}
希望这能满足您的要求



td，th{border:1px solid#000；cursor:pointer；}
.列{显示：无；}
.active{背景：红色；}
span{颜色：红色；字体大小：粗体；}
按钮{填充：10px 18px；背景：红色；光标：指针；}
.matched{背景：绿色；}
选择包含Facebook详细信息的列
选择包含Twitter详细信息的列
选择包含Youtube详细信息的列
选择包含GPlus详细信息的列
选择包含Instagram详细信息的列
请检查“全部”列


第0列
第1栏
第2栏
第3栏
第4栏
Facebook 0
推特0
Youtube 0
gplus0
Instagram 0
Facebook 1
推特1
Youtube 1
GPlus 1
Instagram 1
Facebook 2
推特2
Youtube 2
GPlus 2
Instagram 2


下一个
$（'.column.facebook'）.fadeIn（）；
$（“.next”）.prop（“已禁用”，true）；
var=null；
$（“#表th”）。单击（函数（）{
if（$（this）.hasClass（'active'））
返回false；
$（.next”）.prop（“禁用”，false）；
var stepSpan=$（“.column:visible>span”）.text（）；
如果(那)
that.removeClass（'active'）.text（“列”+that.index（））
那=$（这个）；
即.addClass（'active'）.text（stepSpan）；
$（“.column:可见”）.addClass（“匹配”）；
});
$（“.next”）。单击（函数（）{
如果（$（“#table th.active”）.length请再次查看我的问题，我已对其进行了更新。在同一步骤中选择另一列时是否要删除上一个选定列？如单选按钮选项是否要在移动到下一列时删除所选内容？否，当移动到下一列时，仍应选择上一列
<div class="column facebook matched">Select the column that has the <span>Facebook</span> details</div>