Question

我有一个页面，我在该页面中有2个表格。我想将值从行传递到一个.php页面，但使用相同的按钮。我的代码是这样的：

JS代码：

 var flag;
function highlight(e) {


if (selected[0]){
       selected[0].className = '';  
       flag='1';
}

else if (selected2[0]){
     selected2[0].className = '';
     flag='0';
  }


   e.target.parentNode.className = 'selected';  
   alert(flag);  
   }


var table = document.getElementById('data-table'),
  selected = table.getElementsByClassName('selected');
var table2 = document.getElementById('data-table-aux'),
  selected2 = table2.getElementsByClassName('selected');



table.onclick = highlight;
table2.onclick=highlight;

$("#tst").click(function(){
   if(flag=='1'){
  var value =$(".selected td:first").html();
  value = value || "Nenhuma coluna selecionada";
   window.open("info_detalhada.php?   data2="+value,'_blank','toolbar=0,location=no,menubar=0,height=550,width=650,lef t=200, top=300');  }
    else if(flag=='0'){
  var value =$(".selected td:first").html();
   value = value || "Nenhuma coluna selecionada";
    window.open("info_detalhada2.php?    data2="+value,'_blank','toolbar=0,location=no,menubar=0,height=550,width=650,lef t=200, top=300');
         }

});

HTML CODE

创建2个表格

<table  style="float: left" id="data-table"></table>
<table style="float: left" id="data-table-aux"></table>

（动态表格）

按钮：

<input type="button" id="tst" value="Detailed information"  />

问题是，第一次选择一行时，变量标志将具有旧值，而不是点击的新值。例如，第一次我点击一行标志=未定义，第二次得到所选表的值（0或1），如果我点击其他行标志不会改变，将得到旧值（或0或1）

任何提示？感谢

已编辑：我没有将html放在第一位，因为我不认为它是一个HTML解决方案，因为我使用的是动态表格而没有创建小提琴＆＃39 ; s但我会试着弄清楚我的例子，当它完成时我会放在这里;）

小提琴：https://jsfiddle.net/gwg639Lf/9/

Answer 1

让我建议一个更通用的方法

首先将表格包裹在div

中

<div class="data-tables">
    <table  style="float: left" id="data-table"></table>
    <table style="float: left" id="data-table-aux"></table>
</div>

然后委派click事件处理程序

$('.data-tables').delegate('table', 'click', function(event) {
  $this = $(this)
  $this.addClass('active').removeClass('inactive')
  $this.siblings().addClass('inactive').removeClass('active')
});

此功能执行以下操作：

添加课程active并将inactive（如果存在）移至所选项目/表格
删除课程active并从所有相邻表中添加课程inactive

通过这种方式，您当时只有一个active表

然后声明你的按钮处理程序

$("#tst").click(function(){
    var value = $('.active').html()
    // Use the value as you want
})

无论您添加到div

多少个表，此代码都会有效

Answer 2

您在条件语句后设置元素的类名。因此，第一次，您的标志变量未定义。

尝试将其放在高亮显示功能的开头。

function highlight(e) { e.target.parentNode.className = 'selected'; if (selected[0]){ selected[0].className = ''; flag='1'; } else if (selected2[0]){ selected2[0].className = ''; flag='0'; } alert(flag); }

JsFiddle：https://jsfiddle.net/gwg639Lf/10/

修改：

在条件之前和之后添加它。在条件之前添加它会为您提供类名以初始化标志变量。在给出格式栏之后添加它。

JsFiddle：https://jsfiddle.net/gwg639Lf/13/

Answer 3

好的，经过对Kostas Pelelis功能的一些测试，我找到了一个对我的问题有效的解决方案。

这是JS的代码：

var flag;

$("#data-table tr").click(function(){
 $("#data-table-aux     tr").addClass('selected').siblings().removeClass('selected');  
   $(this).addClass('selected').siblings().removeClass('selected');    
   flag='1';
});

$("#data-table-aux tr").click(function(){
    $("#data-table tr").addClass('selected').siblings().removeClass('selected');  
   $(this).addClass('selected').siblings().removeClass('selected');    
   flag='0';
});


$('#tst').on('click', function(e){
   if (flag=='1')
   alert($("#data-table tr.selected td:first").html());
   else if (flag=='0')
    alert($("#data-table-aux tr.selected td:first").html());
});

这是小提琴 - ＆gt; fiddle

谢谢大家的帮助;）

2个表的相同按钮选择jquery

3 个答案: