堆栈内存溢出
  简体   繁体   English

将onclick事件附加到我的标签-javascript。 yadcf

[英]attach onclick event to my tags - javascript. yadcf

 原文  2015-03-14 07:43:29  4   1    javascript/ yadcf

问题描述

Here is project demo: Github 这是项目演示： Github
Example of live demo: Live demo 现场演示示例： 现场演示

I wish to be able to click on the Tag that is inside the table row itself and not on the drop down in the header 我希望能够单击表行本身内部的标签，而不是单击标题中的下拉菜单

My demo have this code: 我的演示有以下代码： 

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="jquery.datatables.yadcf.css" rel="stylesheet" type="text/css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script src="jquery.dataTables.yadcf.js"></script>

<script>
$(".label.lightblue" ).on( "click", function() {
  yadcf.exFilterColumn(oTable, [[4, $(this).text()]]);
  onclick="yadcf.exFilterColumn(oTable, [[4, 'Tag2']]);"
});
</script>

<style>
.label {
  padding: 0px 10px 0px 10px;
        border: 1px solid #ccc;
        -moz-border-radius: 1em; /* for mozilla-based browsers */
        -webkit-border-radius: 1em; /* for webkit-based browsers */
        border-radius: 1em; /* theoretically for *all* browsers*/
}

.label.lightblue {
        background-color: #99CCFF;
}

#external_filter_container_wrapper {
  margin-bottom: 20px;
}

#external_filter_container {
  display: inline-block;
}
</style>


<script>
$(document).ready(function(){
  $('#example').dataTable().yadcf([
                {column_number : 0},
            {column_number : 1,  filter_type: "range_number_slider", filter_container_id: "external_filter_container"},
            {column_number : 2, data: ["Yes", "No"], filter_default_label: "Select Yes/No"},
            {column_number : 3, text_data_delimiter: ",", filter_type: "auto_complete"},
            {column_number : 4, column_data_type: "html", html_data_type: "text", filter_default_label: "Select tag"}]);
});



</script>
<meta charset=utf-8 />
<title>yadcf - Yet Another DataTables Column Filter</title>
</head>
 <body id="yadcf_example">
    <div id="container">

      <h1>Yet Another DataTables Column Filter - (yadcf) example</h1>
      <div id="external_filter_container_wrapper">
        <label>External filter for "Numbers" column :</label>
        <div id="external_filter_container"></div>
      </div>
      <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
                <thead>
                  <tr>
                    <th>Some Data</th>
                    <th>Numbers</th>
                    <th>Yes / No</th>
                    <th>Values</th>
                    <th>Tags</th>
                  </tr>
                </thead>
                <tbody>
                  <tr class="odd gradeX">
                    <td>Some Data 1</td>
                    <td>1000</td>
                    <td>Yes</td>
                    <td>a_value,b_value</td>
                    <td><span class="label lightblue">Tag1</span><span class="label lightblue">Tag2</span></td>
                  </tr>
                  <tr class="even gradeC">
                    <td>Some Data 2</td>
                    <td>22</td>
                    <td>No</td>
                    <td>b_value,c_value</td>
                    <td><span class="label lightblue">Tag1</span><span class="label lightblue">Tag3</span></td>
                  </tr>
                  <tr class="odd gradeA">
                    <td>Some Data 3</td>
                    <td>33</td>
                    <td>Yes</td>
                    <td>a_value</td>
                    <td><span class="label lightblue">Tag2</span><span class="label lightblue">Tag3</span></td>


                  </tr>
                  <tr class="even gradeA">
                    <td>Some Data 4</td>
                    <td>44</td>
                    <td>No</td>
                    <td>b_value</td>
                    <td><span class="label lightblue">Tag2</span></td>
                  </tr>
                  <tr class="odd gradeA">
                    <td>Some Data 5</td>
                    <td>55</td>
                    <td>Yes</td>
                    <td>a_value,b_value</td>
                    <td><span class="label lightblue">Tag1</span><span class="label lightblue">Tag2</span></td>
                  </tr>
                  <tr class="even gradeA">
                    <td>Some Data 1</td>
                    <td>111</td>
                    <td>No</td>
                    <td>c_value,d_value</td>
                    <td><span class="label lightblue">Tag2</span></td>
                  </tr>
                  <tr class="gradeA">
                    <td>Some Data 2</td>
                    <td>22</td>
                    <td>Yes</td>
                    <td>e_value,f_value</td>
                    <td><span class="label lightblue">Tag3</span><span class="label lightblue">Tag4</span><span class="label lightblue">Tag5</span></td>
                  </tr>
                  <tr class="gradeA">
                    <td>Some Data 3</td>
                    <td>33</td>
                    <td>No</td>
                    <td>a_value,bb_value</td>
                    <td><span class="label lightblue">Tag5</span></td>
                  </tr>
                  <tr class="gradeA">
                    <td>Some Data 4</td>
                    <td>44</td>
                    <td>Yes</td>
                    <td>a_value,f_value</td>
                    <td><span class="label lightblue">Tag4</span></td>
                  </tr>
                  <tr class="gradeA">
                    <td>Some Data 5</td>
                    <td>55</td>
                    <td>No</td>
                    <td>a_value,c_value</td>
                    <td><span class="label lightblue">Tag1</span><span class="label lightblue">Tag2</span></td>
                  </tr>
                  <tr class="gradeA">
                    <td>Some Data 1</td>
                    <td>10</td>
                    <td>Yes</td>
                    <td>a_value,b_value</td>
                    <td><span class="label lightblue">Tag1</span><span class="label lightblue">Tag3</span></td>
                  </tr>
                  <tr class="gradeA">
                    <td>Some Data 2</td>
                    <td>22</td>
                    <td>No</td>
                    <td>d_value,aa_value</td>
                    <td><span class="label lightblue">Tag1</span></td>
                  </tr>
                  <tr class="gradeA">
                    <td>Some Data 3</td>
                    <td>33</td>
                    <td>Yes</td>
                    <td>a_value,c_value</td>
                    <td><span class="label lightblue">Tag1</span><span class="label lightblue">Tag2</span></td>
                  </tr>
                  <tr class="gradeA">
                    <td>Some Data 4</td>
                    <td>44</td>
                    <td>No</td>
                    <td>a_value,bb_value</td>
                    <td><span class="label lightblue">Tag1</span><span class="label lightblue">Tag2</span></td>
                  </tr>
                  <tr class="gradeA">
                    <td>Some Data 5</td>
                    <td>55</td>
                    <td>Yes</td>
                    <td>c_value,e_value</td>
                    <td><span class="label lightblue">Tag2</span></td>
                  </tr>
                  <tr class="gradeA">
                    <td>Some Data 1</td>
                    <td>101</td>
                    <td>No</td>
                    <td>a_value,e_value</td>
                    <td><span class="label lightblue">Tag1</span></td>
                  </tr>
                </tbody>
              </table>



    </div>
  </body>
</html>

I can't understand how attach online click in my demo code 我无法理解如何在演示代码中附加在线点击

1) How call this code upon page ready (note that your selector probably will be different) ? 1）如何在页面准备就绪时调用此代码（请注意，您的选择器可能会有所不同）？ 

$(".label.lightblue" ).on( "click", function() {
  yadcf.exFilterColumn(oTable, [[4, $(this).text()]]);
});

2) How attach onclick event to your "tags" , something like this onclick="yadcf.exFilterColumn(oTable, [[4, 'Tag1']]);" 2）如何将onclick事件附加到您的“标签”上，例如onclick="yadcf.exFilterColumn(oTable, [[4, 'Tag1']]);" ? ？

Can you paste edited code of my demo so I can understand? 您可以粘贴演示的已编辑代码以便我理解吗？

1 个解决方案

解决方案1
 0 已采纳  2015-03-14 21:54:51

For example 例如

You can change 你可以改变 

$(document).ready(function(){
  $('#example').dataTable().yadcf([
                {column_number : 0},
            {column_number : 1,  filter_type: "range_number_slider", filter_container_id: "external_filter_container"},
            {column_number : 2, data: ["Yes", "No"], filter_default_label: "Select Yes/No"},
            {column_number : 3, text_data_delimiter: ",", filter_type: "auto_complete"},
            {column_number : 4, column_data_type: "html", html_data_type: "text", filter_default_label: "Select tag"}]);
});

into 进入 

$(document).ready(function(){
  $('#example').dataTable().yadcf([
                {column_number : 0},
            {column_number : 1,  filter_type: "range_number_slider", filter_container_id: "external_filter_container"},
            {column_number : 2, data: ["Yes", "No"], filter_default_label: "Select Yes/No"},
            {column_number : 3, text_data_delimiter: ",", filter_type: "auto_complete"},
            {column_number : 4, column_data_type: "html", html_data_type: "text", filter_default_label: "Select tag"}]);

    $('#example').on('click',".label.lightblue", function () {
      yadcf.exFilterColumn(oTable, [[4, $(this).text()]]);
    });
});

OR 要么

add onclick to all your tags spans so instead of <td><span class="label lightblue">Tag2</span></td> 将onclick添加到您所有的标签范围内 ，而不是<td><span class="label lightblue">Tag2</span></td>

it will look like <td><span onclick="yadcf.exFilterColumn(oTable, [[4, 'Tag2']]);" class="label lightblue">Tag2</span></td> 它看起来像<td><span onclick="yadcf.exFilterColumn(oTable, [[4, 'Tag2']]);" class="label lightblue">Tag2</span></td> <td><span onclick="yadcf.exFilterColumn(oTable, [[4, 'Tag2']]);" class="label lightblue">Tag2</span></td>

Your jsfiddle with proper yadcf inclusion 您的jsfiddle具有适当的 yadcf包含

Using $(".label.lightblue" ).on 使用$（“。label.lightblue”）.on

onclick="yadcf.exFilterColumn (notice that you need to add onclick with the right Tag as parameter...) onclick =“ yadcf.exFilterColumn （注意，您需要添加带有正确的Tag作为参数的onclick ...）

Note that you should use https://rawgit.com/ to include js/css from github on site like jsfiddle / jsbin / etc... 请注意，您应该使用https://rawgit.com/在jsfiddle / jsbin /等站点上包含来自github的js / css。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何为 JavaScript 生成的文本框附加 onclick 事件？ - How to attach onclick event for a JavaScript generated textbox? Javascript 将 onclick 事件附加到所有链接 - Javascript attach an onclick event to all links 如何使用JavaScript附加class onClick事件？ - How to attach class onClick event using JavaScript? Javascript。 OnClick图片src +1 - Javascript. OnClick Image src +1 Javascript将一个onclick事件附加到带有href变量的所有链接 - Javascript attach an onclick event to all link with href variable Javascript。 Onclick总是返回相同的对象 - Javascript. Onclick returns always the same object 如何在文本框上附加onclick事件？ - How to attach onclick event on textboxes? html、css 和 javascript 的新手。 我无法从 onclick 的下拉菜单中将变量传递给我的 javascript 函数 - New to html,css, and javascript. I am having trouble passing variables to my javascript function from a drop down menu onclick 的JavaScript。听听iPhone震动事件？ - Javascript. Listen for iPhone shake event? 附加事件循环，javascript - attach event in loop, javascript
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM