Question

所以这就是情况，即通过添加带按钮的行来创建可点击的动态表。每行都有信息，可以单击（整行）。我寻找一种方法将我点击的行的信息发送到另一个js函数，该函数将复制另一个动态表中的行。但是诀窍是：要创建一个可点击的行，我使用函数.append并在＆lt;中创建一行。一个＆GT;标签将使用href="function_to_add_the_copied_row＆＃34;调用其他功能。

问题是我无法找到好的语法。任何建议的语法或其他方式来做这个技巧将不胜感激。这是我的代码：

//javascript function to make clickable rows
{
    var infos = modules_found[i].split("\\t");
            rowNum++;
            //word ="'Row number : "+infos[0]+"'";
            $(".targets").append('<li> <a href="javascript:transferArray(\"'+String(infos[0])+'\")"><div class="ui-grid-a"><div class="ui-block-a ui-grid-b"><div class="ui-block-a">'+infos[0]+'</div><div class="ui-block-b">'+infos[1]+'</div><div class="ui-block-c">'+infos[2]+'</div></div><div class="ui-block-b ui-grid-b"><div class="ui-block-a">'+infos[3]+'</div><div class="ui-block-b">'+infos[4]+'</div><div class="ui-block-c">'+infos[5]+'</div></div></div></a></li>');
}

//javascript function who receive the array and add the copied row
function transferArray(infos)
{
    alert("in transferArray function");
    $(".copied").append('<li> <a href="javascript:alert(\"'+row+'\")"><div class="ui-grid-a"><div class="ui-block-a ui-grid-b"><div class="ui-block-a">'+infos[0]+'</div><div class="ui-block-b">'+infos[1]+'</div><div class="ui-block-c">'+infos[2]+'</div></div><div class="ui-block-b ui-grid-b"><div class="ui-block-a">'+infos[3]+'</div><div class="ui-block-b">'+infos[4]+'</div><div class="ui-block-c">'+infos[5]+'</div></div></div></a></li>');
}

Answer 1

通常如何处理 - 如果你没有使用像Angular或Knockout这样的某种类型的javascript库，只是将数据存储在具有数据属性的实际HTML中。您可以根据需要创建任意数量的数据属性，只要它们以data-

开头即可

离。

$(".targets").append('<li data-id="xx" data-name="xx" data-custom=""> <a href="...

然后我建议在每一行上使用jQuery click handler，给它们一个类，例如

 $(".targets").append('<li class="rowClick" data-id="xx" data-name="xx" data-custom=""> <a href="...

然后像这样处理点击

$(document).on('click' , 'rowClick' , function(e){
     var $this = $(this);
     //get data of row clicked
     var idClicked = $this.attr('data-id');
     var nameClicked = $this.attr('data-name');

     // you also have the full HTML of the clicked row if you need to copy somewhere
     var rowHtml =  $(".copied").append($this);
});

您已经在使用jQuery，因此使用它来处理点击，然后您将该元素作为jQuery对象单击。您可以使用本机javascript函数来处理单击并传递数据，但您已经在使用jQuery，这将自动为您带来更多数据。

Answer 2

这是一个高级方法（假设您了解jQuery）：不是将行包装在A标记内，更好的方法是在表上注册一个click事件监听器（通过jQuery API而不是HTML）。在该单击处理程序中，您可以轻松地获取行的索引（使用jQuery API），一旦获得了rowindex，您就可以轻松克隆该行并将其移动到其他位置。

Answer 3

最后，我使用原生的javascript函数，因为建议的解决方案没有工作，即使它看起来都是合法的。所以这就是我所做的：

   (...)
//append the js function
$(".FindTable").append('<li id="addedFindRow"><a href="javascript:copyrow(\''+infos[0]+'\',\''+infos[1]+'\',\''+infos[2]+'\',\''+infos[3]+'\',\''+infos[4]+'\',\''+infos[5]+'\');"><div class="ui-grid-a"><div class="ui-block-a ui-grid-b"><div class="ui-block-a">'+infos[0]+'</div><div class="ui-block-b">'+infos[1]+'</div><div class="ui-block-c">'+infos[2]+'</div></div><div class="ui-block-b ui-grid-b"><div class="ui-block-a">'+infos[3]+'</div><div class="ui-block-b">'+infos[4]+'</div><div class="ui-block-c">'+infos[5]+'</div></div></div></a></li>');
}

function copyrow(info0,info1,info2,info3,info4,info5)
{
    //use data
}

这很重，但那样做。如果有更多的参数被认为会更加混乱。

使用append在javascript函数中发送数组

3 个答案: