Question

我不是JQuery专家，需要一些帮助。

我有一个表单，我正在尝试确定TD单元格是否只有文本（文字控制），而下一个TD的控件包含id用“UI”。当用户将鼠标悬停在文字文本上时，就会发生这种情况。

示例：

<table>
    <tr>
        <td><asp:Literal ID="LSomeID" runat="server"></asp:Literal></td>
        <td><asp:DropDownList ID="UISomeID" runat="server"></asp:DropDownList></td>
    </tr>
</table>

我正在尝试在用户悬停文字时显示工具提示。当他们确实需要查看下一个TD并获取id时，如果它以“UI”开头，然后进行数据库查找。

非常感谢任何帮助。

Answer 1

JS Fiddle - updated

代码： - 已更新

var $tds = $('#tbl td'), 
    pattern = '3'; // the pattern we'll search for.

$tds.each(function(){
	var $th = $(this),
    $children = $th.children(),
  	$content = $th.text();
    
      // if the content exists and it is text
      // check for the existance of the pattern
 	   if($content && $children.length == 0){
      if($content.indexOf(pattern) != -1){
      
      	var $next = $th.next(),
        	$thisID, $nextID;
 				
        // add classes to the current and next TD's
      	$th.addClass('contains');
        $next.addClass('next');
        
        // get ID's of the current and the next TD's
        // if the current TD is the last one in its TR
        // then return "no next".
        $thisID = $th.attr('id');
        $nextID = $next.attr('id') ? $next.attr('id') : 'No next';
        console.log('ThisID: ' + $thisID);
        console.log('NextID: ' + $nextID);
    	}	
      console.log('----------------');
    }
});

table#tbl td{ border:1px solid black; }
.contains{ background-color:orange; outline:2px navy solid; }
.next{ background-color:green; color:white; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table id="tbl">
  <tr>
    <td id="1-1">item 1.1</td>
    <td id="1-2">item 1.2</td>
    <td id="1-3" id="3.1">item 1.3</td>
    <td id="1-4">item 1.4</td>
  </tr>
  <tr>
    <td id="2-1">item 2.1</td>
    <td id="2-2">item 2.2</td>
    <td id="2-4">item 2.3</td>
    <td id="2-5">item 2.4</td>
  </tr>
  <tr>
    <td id="3-1"></td>
    <td id="3-2">item 3.2</td>
    <td id="3-3">item 3.4</td>
    <td id="3-.4">
      <p>item 3.5</p>
    </td>
  </tr>
</table>
<hr>
<p> Note that the first td in the third tr wasn't selected because it is empty</p>
<p> also note that item 3.5 in td4 tr3 wasn't selected because it doesn't contain 
  text only it has a p tag wrapping the text</p>

Answer 2

工具提示：

$('select').change(function (e, data) {
  if (data) {
    return;
  }
  $('select').not(this).trigger('change', [{FromMyself: "ok"}]);
});

JS：

<div style="position: absolute; border: 1px solid black; display: none" id="tooltip">
  Tooltip
</div>

Answer 3

只需要一些条件逻辑

$('td').hover(function() {
    var $cell = $(this),
        $next = $cell.next(),
        $prev = $cell.prev();
    // if no tags as children it is text only
    if (!$cell.children().length) {
        // see if neighbors have wanted ID
        if ($next.find('[id^="UI"]').length || $prev.find('[id^="UI"]').length) {
            //show tooltip
        }
    }

}, function() {
    //hide tooltip
});

或者相反，如果您需要在这些单元格上使用插件，可以使用filter()

$('td').filter(function() {
    var $cell = $(this),
        $next = $cell.next(),
        $prev = $cell.prev(),
        hasChildren = $cell.children().length;

        return !hasChildren && ($next.find('[id^="UI"]').length || $prev.find('[id^="UI"]').length);


}).mytoolTipPlugin();

或者，这是使用已知ID的方法：

$('td:has(select[id^="UI"])').each(function(){
   var $cell= $(this), $prev = $cell.prev(), $next=$cell.next();
   if(!$prev.children().length){
        $prev.mytoolTip()
   }
   if(!$next.children().length){
        $next.mytoolTip()
   }       
});

Answer 4

我会做这样的事情，希望它会增加一些价值。

  $('table tr').hover(function(){

      var literal  = $(this).find('td:first');

      // check if literal has text and id start with UI of next td to litral is not undefiend(means it exist), also check if first td just contains string not sub elements.

    if(literal.children().length < 0 && literal.text().length > 0 && literal.next(td[id^="UI") != undefiend){

    //make ajax call or db look up

   }

如何确定TD是否只有文本，下一个TD是否包含以特定ID开头的控件

4 个答案: