位置

Question

嗨，在下面的代码中，我调用onclick（）来显示ul数据。

 <td class="hospitails_class" onClick="">Hospitails</td>
 <td class="clinics_class" onClick="">Clinics</td>
 <td class="homecare_class" onClick="">Home Care</td>
 <td class="information_class" onClick="">Information Centers</td>

输出：

Hospitails Clinics Home Care  Information Centers

现在如果我打电话给医院onclick.these是我的javascript代码

的JavaScript

<script type="text/javascript">
    $(document).ready(function () {
        $(".hospitails").click(function (event) {
            var elem = $(event.target),
                str = '',
                locs, len, i = 0,
                strArr = [];
            if (elem.hasClass('hospitails_class')) {
                str = '.hospitails_loc ul li a';

            } else if (elem.hasClass('clinics_class')) {
                str = '.clinics_loc ul li a';
            } else if (elem.hasClass('homecare_class')) {
                str = '.homecare_loc ul li a';
            } else if (elem.hasClass('information_class')) {
                str = '.information_loc ul li a';
            }
            locs = $(str);
            len = locs.length;

            for (; i < len; i++) {
                strArr.push(locs[i].text);
            }
            strArr = strArr.join('|');
            alert(strArr);
        });
    });
</script>

输出：

医院警报 - ＆gt; Bangalore salem Goa Mangalore Visakhapatnam Vijawada jaipur Malaysia

诊所警报 - ＆gt;拉各斯（）尼日利亚

家庭护理警报 - ＆gt;班加罗尔|斋

相同的最后一个也有不同的警报值。

现在基于警报显示相同，就像我想在tr

的下方显示一样

完整代码：

位置

<div id="locations1">
    <table cellpadding="0" cellspacing="0" border="0">
        <tr class="hospitails" onClick="">
            <td class="hospitails_class" onClick="">Hospitails</td>
            <td class="clinics_class" onClick="">Clinics</td>
            <td class="homecare_class" onClick="">Home Care</td>
            <td class="information_class" onClick="">Information Centers</td>
        </tr>
    </table>
    <div class="hospitails_loc">
        <ul>
            <li><a href="#">Bangalore</a>
            </li>
            <li><a href="#">salem</a>
            </li>
            <li><a href="#">Goa</a>
            </li>
            <li><a href="#">Mangalore</a>
            </li>
            <li><a href="#">Visakhapatnam</a>
            </li>
            <li><a href="#">Vijawada</a>
            </li>
            <li><a href="#">jaipur</a>
            </li>
            <li><a href="#">Malaysia</a>
            </li>
        </ul>
    </div>
    <div class="clinics_loc">
        <ul>
            <li><a href="#">Lagos(Nigeria)</a>
            </li>
        </ul>
    </div>
    <div class="homecare_loc">
        <ul>
            <li><a href="#">Bangalore</a>
            </li>
            <li><a href="#">Jaipur</a>
            </li>
        </ul>
    </div>
    <div class="information_loc">
        <ul>
            <li><a href="#">Andhrapradesh</a>
            </li>
            <li><a href="#">Karnataka</a>
            </li>
            <li><a href="#">Goa</a>
            </li>
            <li><a href="#">Tamil Naidu</a>
            </li>
        </ul>
    </div>
</div>

Answer 1

你的意思是这个（注意我把医院改成了医院，并假设TR上只有一个课程）：

FIDDLE

＆＃13;

$(function () {
        $(".hospitals").on("click",function (event) {
            var $elem = $(event.target),
                str = '',
                locs, len, i = 0,
                strArr = [],
                elemClass=$elem.prop("class");
            if (elemClass.indexOf('_class') !=-1) {
              str = "."+elemClass.split("_class")[0]+'_loc ul li a';
              $locs = $(str);
              len = $locs.length;
              for (; i < len; i++) {
                strArr.push($locs[i].text);
              }
              strArr = strArr.join('|');
            }   
            $("#output").html(strArr.length>0?strArr:"");
        });
        $(".hospitals > td:first").click();
    });

＆＃13;

td { padding:3px;
    border-right:  1px dashed #f0F;
    border-bottom: 1px dashed #f00;
}
#output { padding:3px; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    <div id="locations">
         <h1>Locations</h1>

        <div id="locations1">
            <table cellpadding="0" cellspacing="0" border="0">
                <tr class="hospitals">
                    <td class="hospitals_class">Hospitals</td>
                    <td class="clinics_class">Clinics</td>
                    <td class="homecare_class">Home Care</td>
                    <td class="information_class">Information Centers</td>
                </tr>
            </table>
            <div id="output"></div>
            <div class="hospitals_loc">
                <ul>
                    <li><a href="#">Bangalore</a></li>
                    <li><a href="#">salem</a></li>
                    <li><a href="#">Goa</a></li>
                    <li><a href="#">Mangalore</a></li>
                    <li><a href="#">Visakhapatnam</a></li>
                    <li><a href="#">Vijawada</a></li>
                    <li><a href="#">jaipur</a></li>
                    <li><a href="#">Malaysia</a></li>
                </ul>
            </div>
            <div class="clinics_loc">
                <ul>
                    <li><a href="#">Lagos(Nigeria)</a></li>
                </ul>
            </div>
            <div class="homecare_loc">
                <ul>
                    <li><a href="#">Bangalore</a></li>
                    <li><a href="#">Jaipur</a></li>
                </ul>
            </div>
            <div class="information_loc">
                <ul>
                    <li><a href="#">Andhrapradesh</a></li>
                    <li><a href="#">Karnataka</a></li>
                    <li><a href="#">Goa</a></li>
                    <li><a href="#">Tamil Naidu</a></li>
                </ul>
            </div>
        </div>
    </div>

＆＃13;

Answer 2

看起来不错：）

LIVE

$(document).ready(function() {
    $(".hospitails td").on("click", function() {
        var el = $(this).attr("class");
        var str = "." + el.substring(0, el.indexOf('_')) + "_loc ul li a";
        var locs = $(str);

        var num_nulls = $(this).index();
        var add = "";
        for (var i=0; locs[i]; i++) {
            add += "<tr>"
            for (var y=0; y<num_nulls; y++){
                add += "<td class='null'></td>";
            }
            add += "<td>" + locs[i].text + "</td></tr>";
        }
        $(".hospitails").parent().find("tr").not(".hospitails").remove();
        $(".hospitails").after(add);

    });
});

onclick后如何更改文本

位置

2 个答案: