$("#zz").click(function() {
 
                 $(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='7'>" + $(this).next().html() + "</td></tr>");
            });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<body>
<table>
<tr>
<td>
<button id="zz" >zz</button>

<div id="data_hidden" style="display:none">
<table>
<tr>
<td>
Hidden data appears
</td>
</tr>
</table>
</div>
</td>
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
</tr>
<tr>
<td>
4
<td>
<td>
5
<td>
<td>
6
<td>

</tr>
</table>
</body>
</html>
<tr role="row" class="odd">
                            <td class="sorting_1">
                                <img class="plus" id="plus" src="../Images/plus.png" style="width: 2em;">
                                <div style="display:none">
                                    <table>
                                        <thead class="bg-blue">
                                            <tr>
                                                <th></th>
                                                <th>Established On</th>
                                                <th>Objective</th>
                                                <th>Target Value</th>
                                                <th>Baseline Value</th>
                                                <th>Monitorng mechanism</th>
                                                <th>Target Date</th>
                                                <th>Action Plan</th>
                                                <th>Frequency of Evaluation</th>
                                            </tr>
                                        </thead>
                                        <tbody>

                                                    <tr>
                                                        <td>
                                                            <img class="add" id="add" src="/Images/add.png" style="width: 2em;">
                                                            <div style="display:none">
                                                                <table>
                                                                    <thead class="bg-blue">
                                                                        <tr>
                                                                            <th>
                                                                                Objective Evaluated On
                                                                            </th>
                                                                            <th>
                                                                                Objective Measured Value
                                                                            </th>
                                                                            <th>
                                                                                From Period
                                                                            </th>
                                                                            <th>
                                                                                To Period
                                                                            </th>
                                                                            <th>
                                                                                Trend
                                                                            </th>
                                                                            <th>
                                                                                NCR Ref. (If Objective not achieved)
                                                                            </th>
                                                                            <th>
                                                                                Status of Objective Evaluation
                                                                            </th>
                                                                            <th>
                                                                                Objective Evidence
                                                                            </th>
                                                                        </tr>
                                                                    </thead>
                                                                    <tbody>
                                                                            <tr>
                                                                                <td colspan="8">
                                                                                    <div style="text-align: center;">
                                                                                        <h4 style="color: grey;">No data exists</h4>
                                                                                    </div>
                                                                                </td>
                                                                            </tr>
                                                                    </tbody>
                                                                </table>
                                                            </div>
                                                        </td>
                                                        <td>
09/07/2019                                                        </td>
                                                        <td> ww</td>
                                                        <td> ww</td>
                                                        <td> ww</td>
                                                        <td> ww</td>
                                                        <td>
09/07/2019                                                        </td>
                                                        <td>
                                                                <p>Not Available</p>
                                                        </td>
                                                        <td> Annually</td>
                                                    </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </td>
                            <td>
                                1
                            </td>
                            <td>
                                <a data-toggle="popover" data-trigger="hover" href="/Objectives/ObjectivesDetails?Objectives_Id=3" id="3" onclick="HyperLinkProgressIconFunction()" data-original-title="" title="">ee</a>
                            </td>
                            <td>
                                2019
                            </td>
                            <td>
                                Department
                            </td>
                            <td>
                                HR DEPARTMENT
                            </td>

                            <td>
                                Shilpa jay bhat,Lavita p Pereira,chandramouli b cc
                            </td>
                            <td>
                                Approved
                            </td>


                            <td>
                                    <span class="badge badge-info">No File attached</span>
                            </td>



                            <td>

                                    <a href="/Objectives/ObjectivesEdit?Objectives_Id=3" title="Edit Objective details" onclick="HyperLinkProgressIconFunction()">
                                        <span class="badge badge-info">Edit</span>
                                    </a>

                            </td>

                                <td>



                                    <span class="badge badge-danger" title="Delete Internal Document" onclick="DeleteItems(3)" style="cursor:pointer;">Delete</span>
                                </td>
                        </tr>

उपरोक्त मेरी तालिका से केवल एक पंक्ति का एक उदाहरण है।

एक बटन पर $(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='9'>" + $(this).next().html() + "</td></tr>"); जोड़ने पर, तालिका नए <tr> में दिखाई देने लगती है।

मेरे ज्ञान का विस्तार करने के लिए, जाहिरा तौर पर इसे सीधे tr में जोड़ दिया गया है क्योंकि प्रदर्शन किसी पर भी सेट नहीं है, क्या डोम तत्व इस तरह काम करते हैं? जब एचटीएमएल की बात आती है तो मैं सबसे ज्यादा नौसिखिया हूं।

क्या कोई कृपया समझा सकता है कि ऐसा क्यों होता है?

किसी भी प्रासंगिक जानकारी की बहुत सराहना की जाएगी।

0
Craig Rodrigues 30 अक्टूबर 2019, 16:15

1 उत्तर

सबसे बढ़िया उत्तर

आपका चयन (html() का उपयोग करके) तत्व की सामग्री लौटाता है, न कि स्वयं तत्व, इसलिए तत्व पर किसी भी विशेषता की भी अवहेलना की जाती है। अपनी छिपाने की शैलियों को एक स्तर से नीचे ले जाना एक आसान समाधान हो सकता है:

<div id="data_hidden">
    <table style="display:none">
        <tr>
            <td>
                Hidden data appears
            </td>
        </tr>
    </table>
</div>

डेमो 1

यह मूल div तत्व को DOM में छोड़ देता है, लेकिन यह उपस्थिति को प्रभावित नहीं करता है।

वैकल्पिक रूप से, चयन के कच्चे तत्व के outerHTML को पकड़ें:

$(this).closest("tr").after("<tr><td colspan='2'></td><td colspan='7'>" 
    + $(this).next().get(0).outerHTML + "</td></tr>");
});

डेमो 2

0
isherwood 30 अक्टूबर 2019, 16:16