Question

我想检查表格是否仍然输入虚拟文本。如果那是真的那么应该出现一条消息，他们必须在那里输入一些文本（通过拖放）

拖放工作不是问题我只需要检查td是否仍然有虚拟tekst 否则无法继续下一步

这是我的html表格布局：

<table width="900px" style="background-color: #dcdcdc;">
    <tbody class="sortable">
   <tr>
       <td>
           <table width="90%" style="background-color:#85ca00;; margin:0 auto; border: none; border-collapse: collapse; padding: 0; ">
               <tbody>
               <tr >
                   <td align="left" style="padding:10px; " class="dropzone">
                       s                 
                   </td>
                   <td align="right" style="padding:10px;" class="dropzone">
                       <p class="dummyTekst">s</p> 
                   </td>
               </tr>
               </tbody>
           </table>

           <table width="90%" style="background-color:white; margin:0 auto;  background-color:lightgrey;border: none; border-collapse: collapse; padding: 0; ">

                <tr style="background-color:white;">
                   <td width="200px;" style=" vertical-align:top;">
                       <table style=" border: none; border-collapse: collapse;  background-color:lightgrey; margin:10px;" width="100%" align="left" class="dropzone Required ">
                           <tbody  >
                                <th style="background-color:gray">Menu</th>
                                <tr  ><td ><p style="padding:10px;" class="dummyTekst">Drop  content</p></td></tr>
                            </tbody>
                       </table>
                       <table style=" border: none; border-collapse: collapse; background-color:lightgrey;  margin:10px;" width="100%" align="left" class="dropzone Required">
                           <tbody>
                             <th style="background-color:gray">Menu</th>
                             <tr><td ><p style="padding:10px;" class="dummyTekst">Drop  content</p></td></tr>
                           </tbody>
                       </table>
                   </td>
                   <td style="vertical-align:top; margin-top:20px;" >
                       <table style=" border: none;  background-color:lightgrey; border-collapse: collapse; margin:10px;" width="90%" align="right" class="dropzone Required">
                           <tbody>
                             <th style="background-color:gray">Main Content</th>
                             <tr ><td ><p style="padding:10px;" class="dummyTekst">Drop  content</p></td></tr>
                           </tbody>
                       </table>
                   </td>
               </tr>

           </table>
           <table width="90%" style="background-color:#85ca00; margin:0 auto; border: none; border-collapse: collapse; padding: 0;" class="dropzone">
               <tr >
                   <td align="center" style="padding:10px;" ></td>
               </tr>
           </table>
       </td>
   </tr>
    </tbody>
</table>

如果人们在那里放弃内容，则删除p标签如果他们没有留言就应该出现在那里

我试过了：

function checkTemplate(){
            $jQ('.Required > tbody > tr > td').each(function(index){
            if($jQ(this).children().hasClass('dummyText'));
            console.log('Empty');
             });
           }

Answer 1

正如我评论的那样：

dummyTekst！= dummyText

您正在检查类dummyText，其中您将dummyTekst作为实际类名提供。除此之外。你并不需要所有的TD和循环孩子。只需检查班级是否存在。请参阅小提琴：http://jsfiddle.net/z5oyL9cw/

$(document).ready(function(){
    if ($(".dummyTekst").length > 0) {
        alert('We still have dropzones');
    }
});

Answer 2

查看jQuery的.each（）：http://api.jquery.com/each/

它遍历...的任何实例......无论你想要什么目标。所以，你的可能是：

$( "td" ).each(function() {

从那里开始，我必须查看你的javascript以了解检查用户是否有任何改变的最佳方法。一种选择是使用jQuery＆＃39;。来查看p是否存在。 http://api.jquery.com/has/或者您可以简单地检查子元素本身。一旦你发布你的JS，我可以更确定地说。

Answer 3

为什么不向你的单元格添加一个CSS类（即has-dummy-text）并将其用作标志？

在您的示例中，例如：

<table>
<!-- Rest of code ommitted for clarity ... -->
 <tbody>
     <th style="background-color:gray">Menu</th>
     <tr><td class="has-dummy-text"><p style="padding:10px;" class="dummyTekst">Drop  content</p></td></tr>
</tbody>

这样你可以通过jQuery的.addClass（）或.removeClass（）方法添加或删除类来管理单元格的状态，然后检查单元格是否仍然有你的初始虚拟-text state 通过.hasClass（）方法检查。（有关详细信息，请参阅jQuery class manipulation methods。）

Answer 4

我会写这样的东西：

function checkTemplate(){
    $jQ('table > tbody > tr > td').each(function(index){
        if($jQ(this).children('p.dummyTekst').length == 0){
            console.log('Empty');
        }
    });
}

Answer 5

如果你想确保你的孩子'p.dummyTekst'在那里并且不为空，你应该使用jquery UI中的.is（）。只是为了确保并避免飞蛋和东西：P。另外，要在P中放置文本，请使用.append。

$jQ('.required > tbody > tr > td').each(function(index){
    if( $jQ(this).children('p.dummyTekst').is(":empty") ) {
        $jQ(this).children('p.dummyTekst').append("Your text here");
    }
});

请注意，浏览器可以解决这个问题，如果你在使用.is（“：empty”）时遇到问题，请尝试使用jQuery中的$ .trim（）。如果他不能修剪（$ .trim（）），该元素应为空。

$jQ('.required > tbody > tr > td').each(function(index){
    if ( !$jQ(this).children('p.dummyTekst').trim() ) {
        $jQ(this).children('p.dummyTekst').append("Your text here");
    }
});

Answer 6

我会尝试一下这个（我不太了解JQuery，但我知道一些JavaScript，也许你可以转换它;抱歉，如果它没用。

function checkTemplate()  {
  var dummy = document.getElementByClassName(dummyTekst);
  if(dummy.innerHTML == "s")  {
  [Your Continue Function]
  }
  else  {
    alert(You must have the dummy text!)
  }
  }

检查table tr td是否为空

6 个答案: