jQuery: всплывающее диалоговое окно при выборе таблицы

Мне нужно открыть диалоговое окно, когда таблица выбрана на веб-странице. Я могу открыть диалоговое окно, используя элемент id таблицы и функцию mouseup. Но это не будет работать для таблиц, у которых не задано поле «id». Я наткнулся на select и я могу видеть, что это работает для входных элементов, но я не могу заставить его работать для элементов таблицыjQuery: всплывающее диалоговое окно при выборе таблицы

Вот мой текущий рабочий код

function getSelected() { 
 
    if (window.getSelection) { 
 
     return window.getSelection(); 
 
    } else if (document.getSelection) { 
 
     return document.getSelection(); 
 
    } else { 
 
     var selection = document.selection && document.selection.createRange(); 
 
     if (selection.text) { 
 
      return selection.text; 
 
     } 
 
     return false; 
 
    } 
 
    return false; 
 
} 
 

 
$('#test').mouseup(function() { 
 
    var selection = getSelected(); 
 

 
    if (selection) { 
 
     var arr = []; 
 
     var vals = $('#test').find('td').filter(function() { 
 
      //get only <td> that contain numeric value inside it 
 
      return $.isNumeric(this.innerHTML); 
 
     }).each(function (i, val) { 
 
      arr.push(val.innerHTML); 
 
     }); 
 
     alert(arr); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<table id="test" style="width:100%"> 
 
    <tr> 
 
     <td>Jill</td> 
 
     <td>21</td> 
 
     <td>50</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Eve</td> 
 
     <td>13</td> 
 
     <td>94</td> 
 
    </tr> 
 
</table> 
 
</div>

Это работает только для таблиц с полем идентификатора, установленным для «теста»

И вот что я пробовал с помощью select Он работает для ввода, но не для таблицы.

$(":input").select(function() { 
 
    $("div").text("table was selected").show(); 
 
}); 
 
$(":table").select(function() { 
 
    $("div").text("text was selected").show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<body> 
 
     <input type="text" value="Some text"> 
 
    <p>Click and drag the mouse to select text in the inputs.</p> 
 
<table id="test" style="width:100%"> 
 
    <tr> 
 
     <td>Jill</td> 
 
     <td>21</td> 
 
     <td>50</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Eve</td> 
 
     <td>13</td> 
 
     <td>94</td> 
 
    </tr> 
 
</table>  
 
    <div></div> 
 
     </body>

Пожалуйста, скажите мне, что я делаю неправильно. Новое в jQuery. Благодарю .

источник

2014-11-18 clever_bassi

Чтобы выбрать все таблицы на странице, вам необходимо использовать element selector. :input selctor это специальный селектор, который будет выбирать все поля ввода, как input, select, textarea и button

$("table").select(function() { 
    $("div").text("text was selected").show(); 
});

Там нет такого селектора, как :table

источник

2014-11-18 02:39:16

я изменил его. все еще не работает –

http://jsfiddle.net/px9n3o1c/2/ –

@ayushi вам нужно выбрать часть текста ... или изменить событие на событие click –

Вы можете использовать «таблицу» селектор, чтобы выбрать все таблицы на странице. Затем примените обработчик к каждой таблице. В этом случае можно щелкнуть по таблице, чтобы использовать событие click. Как это:

$("table").on('click', function() { 
 
    $("div").text("text was selected").show(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script> 
 
<body> 
 
     <input type="text" value="Some text"> 
 
    <p>Click and drag the mouse to select text in the inputs.</p> 
 
<table id="test" style="width:100%"> 
 
    <tr> 
 
     <td>Jill</td> 
 
     <td>21</td> 
 
     <td>50</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Eve</td> 
 
     <td>13</td> 
 
     <td>94</td> 
 
    </tr> 
 
</table>  
 
    <div></div> 
 
     </body>

источник

2014-11-18 02:40:59

jQuery: всплывающее диалоговое окно при выборе таблицы

ответ

Смежные вопросы