0
私はドロップイベントを取得しようとしていますが、取得できません。お願いします 。 すべてのドロップアクションにsavechanges（）関数を表示したい。HTML Dom動的テーブルのドロップアクションを取得しますか？
$('#drag').sortable();
function savechanges() {
\t var table = document.getElementById("t01");
\t var x = document.getElementById("t01").rows[1].cells[1].innerHTML;
\t alert("First Row Name Value is : "+x);
}<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
\t <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet">
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.min.css">
<style>
table {
width:100%;
}
table, th, td {
border: 2px solid #494345;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
table#t01 tr:nth-child(even) {
background-color: #eee;
}
table#t01 tr:nth-child(odd) {
background-color:#fff;
}
table#t01 th {
background-color: #FF3F67;
color: white;
}
table#t01 tr:hover {
background-color: #FFF44D;
}
table#t01 tr:hover td {
background-color: transparent; /* or #000 */
}
</style>
\t
</head>
<table id="t01" class="table table-bordered pagin-table" width="100%" style="border: 2px solid #494345;border-collapse: collapse;"><tbody><tr style="cursor:no-drop"><th style="padding: 5px;border: 2px solid #494345;" width="10%">No</th><th style="padding: 5px;border: 2px solid #494345;"> Name</th><th style="padding: 5px;border: 2px solid #494345;">URL</th><th width="5%" style="padding: 5px;border: 2px solid #494345;"></th></tr></tbody><tbody id="drag" class="ui-sortable">
<tr style="padding: 5px; border: 2px solid rgb(73, 67, 69); cursor: move;" class="ui-sortable-handle"><td style="padding: 5px;border: 2px solid #494345;" width="10%">1</td><td style="padding: 5px;border: 2px solid #494345;" width="55%">Google</td><td style="padding: 5px;border: 2px solid #494345;" width="30%"><a onmouseover="this.style.color="blue";" onmouseout="this.style.color="#F52887";" style="text-decoration:none;" href="https://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor" target="_blank">Test Link</a></td><td style="padding: 5px;border: 2px solid #494345;" width="5%"><i onmouseover="this.style.color="red";" onmouseout="this.style.color="black";" style="cursor: pointer;" onclick="deleteFeed('aasasa|!Name-URL!|https://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor')" class="material-icons">highlight_off</i></td></tr>
<tr style="padding: 5px; border: 2px solid rgb(73, 67, 69); cursor: move;" class="ui-sortable-handle"><td style="padding: 5px;border: 2px solid #494345;" width="10%">2</td><td style="padding: 5px;border: 2px solid #494345;" width="55%">GitHub</td><td style="padding: 5px;border: 2px solid #494345;" width="30%"><a onmouseover="this.style.color="blue";" onmouseout="this.style.color="#F52887";" style="text-decoration:none;" href="https://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor" target="_blank">Test Link</a></td><td style="padding: 5px;border: 2px solid #494345;" width="5%"><i onmouseover="this.style.color="red";" onmouseout="this.style.color="black";" style="cursor: pointer;" onclick="deleteFeed('aasasa|!Name-URL!|https://www.w3schools.com/cssref/tryit.asp?filename=trycss_cursor')" class="material-icons">highlight_off</i></td></tr><tr style="padding: 5px; border: 2px solid rgb(73, 67, 69); cursor: move;" class="ui-sortable-handle"><td style="padding: 5px;border: 2px solid #494345;" width="10%">3</td><td style="padding: 5px;border: 2px solid #494345;" width="55%">Stackoverflow</td><td style="padding: 5px;border: 2px solid #494345;" width="30%"><a onmouseover="this.style.color="blue";" onmouseout="this.style.color="#F52887";" style="text-decoration:none;" href="https://www.google.com.mm/search?q=%24(%27tbody%27).sortable()%3B+except+th&rlz=1C1CHBF_enMM732MM732&oq=%24(%27tbody%27).sortable()%3B+except+th+&aqs=chrome..69i57.6073j0j9&sourceid=chrome&ie=UTF-8" target="_blank">Test Link</a></td><td style="padding: 5px;border: 2px solid #494345;" width="5%"><i onmouseover="this.style.color="red";" onmouseout="this.style.color="black";" style="cursor: pointer;" onclick="deleteFeed('AASASA|!Name-URL!|https://www.google.com.mm/search?q=%24(%27tbody%27).sortable()%3B+except+th&rlz=1C1CHBF_enMM732MM732&oq=%24(%27tbody%27).sortable()%3B+except+th+&aqs=chrome..69i57.6073j0j9&sourceid=chrome&ie=UTF-8')" class="material-icons">highlight_off</i></td></tr></tbody></table>
<a onclick="savechanges();" style="text-decoration:none;" id="view-source" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect mdl-color--accent mdl-color-text--accent-contrast">Save</a>私のコードの作品にしてみてください。
私の主な目的は、データベースに新しい値の変更を動的に保存するために、このテーブルに対してドロップアクションを取得することです。私の問題を読んでいただきありがとうございます。
のjQuery UIソート可能
stopイベントを使用することができますありがとうございました。素晴らしいコード：D –あなたは歓迎です:) –