Skip to content

Instantly share code, notes, and snippets.

@HorseCheng

HorseCheng/gist:955883ff93394cf22723adb93eda6344

Last active November 13, 2024 17:52
Show Gist options
  • Save HorseCheng/955883ff93394cf22723adb93eda6344 to your computer and use it in GitHub Desktop.
Save HorseCheng/955883ff93394cf22723adb93eda6344 to your computer and use it in GitHub Desktop.
Download ZIP
difflib.HtmlDiff with button
Raw
gistfile1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
table.diff {font-family:Courier; border:medium;}
.diff_header {background-color:#e0e0e0}
td.diff_header {text-align:right}
.diff_next {background-color:#c0c0c0}
.diff_add {background-color:#aaffaa}
.diff_chg {background-color:#ffff77}
.diff_sub {background-color:#ffaaaa}
</style>
</head>
<body>
<div>
<button class="copy-btn" data-table-id="difflib_chg_to0__top_1" data-column="2">Copy Column 1</button>
<button class="copy-btn" data-table-id="difflib_chg_to0__top_1" data-column="5">Copy Column 2</button>
</div>
<table class="diff" id="difflib_chg_to0__top_1"
cellspacing="0" cellpadding="0" rules="groups" >
<colgroup></colgroup> <colgroup></colgroup> <colgroup></colgroup>
<colgroup></colgroup> <colgroup></colgroup> <colgroup></colgroup>
<tbody>
<tr><td class="diff_next" id="difflib_chg_to0__0"><a href="#difflib_chg_to0__top_1">t</a></td><td class="diff_header" id="from0_1">1</td><td nowrap="nowrap"><span class="diff_sub">aaaa</span></td><td class="diff_next"><a href="#difflib_chg_to0__top_1">t</a></td><td class="diff_header" id="to0_1">1</td><td nowrap="nowrap"><span class="diff_add">bbbbb</span></td></tr>
<tr><td class="diff_next"></td><td class="diff_header" id="from0_2">2</td><td nowrap="nowrap"><span class="diff_sub">aaaaaaaa</span></td><td class="diff_next"></td><td class="diff_header" id="to0_2">2</td><td nowrap="nowrap"><span class="diff_add">bbbbb</span></td></tr>
</tbody>
</table>
<br/>
<div>
<button class="copy-btn" data-table-id="difflib_chg_to0__top_2" data-column="2">Copy Column 1</button>
<button class="copy-btn" data-table-id="difflib_chg_to0__top_2" data-column="5">Copy Column 2</button>
</div>
<table class="diff" id="difflib_chg_to0__top_2"
cellspacing="0" cellpadding="0" rules="groups" >
<colgroup></colgroup> <colgroup></colgroup> <colgroup></colgroup>
<colgroup></colgroup> <colgroup></colgroup> <colgroup></colgroup>
<tbody>
<tr><td class="diff_next" id="difflib_chg_to0__0"><a href="#difflib_chg_to0__top_2">t</a></td><td class="diff_header" id="from0_1">1</td><td nowrap="nowrap"><span class="diff_sub">AAaSSA</span></td><td class="diff_next"><a href="#difflib_chg_to0__top_2">t</a></td><td class="diff_header" id="to0_1">1</td><td nowrap="nowrap"><span class="diff_add">ZZZSSAZZZ</span></td></tr>
<tr><td class="diff_next"></td><td class="diff_header" id="from0_2">2</td><td nowrap="nowrap"><span class="diff_sub">ABABAB</span></td><td class="diff_next"></td><td class="diff_header" id="to0_2">2</td><td nowrap="nowrap"><span class="diff_add">ZZSD</span></td></tr>
</tbody>
</table>
<script>
// Function to handle copying of the content from a column
function copyColumnContent(tableId, columnIndex) {
const table = document.getElementById(tableId);
const rows = table.getElementsByTagName('tr');
let columnText = '';
// Loop through all rows and gather text from the selected column
for (let i = 0; i < rows.length; i++) {
const cells = rows[i].getElementsByTagName('td');
if (cells.length > columnIndex) {
columnText += cells[columnIndex].innerText.trim() + '\n';
}
}
// Create a temporary text area to copy the content
const textArea = document.createElement('textarea');
textArea.value = columnText.trim();
document.body.appendChild(textArea);
textArea.select();
document.execCommand('copy');
document.body.removeChild(textArea);
alert('Column copied to clipboard!');
}
// Attach event listeners to the "Copy" buttons
document.querySelectorAll('.copy-btn').forEach(button => {
button.addEventListener('click', function() {
const tableId = button.getAttribute('data-table-id');
const columnIndex = button.getAttribute('data-column') ;
copyColumnContent(tableId, columnIndex);
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment