javascript - 检查表 tr td 是否不为空

Question

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

拖放工作正常那不是问题我只需要检查 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

您正在检查提供 dummyTekst 作为实际类名的 dummyText 类。除此之外。你不必每个 TD 和循环 child 。只需检查类(class)是否存在。参见 fiddle :http://jsfiddle.net/z5oyL9cw/

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