১.
প্রথমটি দিয়ে স্প্রেডশীট কিংবা অন্য সোর্স থেকে থেকে নিউমারিক্যাল ডাটা কপি করে এইচটিএমএল ফরমের ইনপুট ফিল্ডসমূহে পপুলেট করা যায়। আপনি চাইলে যে কোন ইনপুট ফিল্ড থেকে পপুলেশন শুরু করতে পারেন।আপনার পেইজের body ট্যাগ শেষ হওয়ার আগে স্ক্রীপ্টটি জুড়ে দিতে হবে।
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
| <script type="text/javascript">populate_checkbox_parent = document.createElement("div");populate_checkbox_parent.id = "populate_checkbox_parent_div";populate_checkbox_parent.style.position = "fixed";populate_checkbox_parent.style.top = 0;populate_checkbox_parent.style.right = 0;populate_checkbox_parent.innerHTML = "<span style='color:green;font-size:.8em'>Populate </span>";populate_checkbox = document.createElement("input");populate_checkbox.id = "populate_checkbox_field";populate_checkbox.type = "checkbox";populate_checkbox.checked = true;document.body.appendChild(populate_checkbox_parent);document.getElementById("populate_checkbox_parent_div").appendChild(populate_checkbox);start_value_container = document.createElement("input");start_value_container.type = "hidden";start_value_container.id = "populate_from_value_field";document.body.appendChild(start_value_container);my_input = document.getElementsByTagName("input");for(l = 0; l < my_input.length; l++){ my_input[l].setAttribute("index", l); my_input[l].onclick = function(){ document.getElementById("populate_from_value_field").value = this.getAttribute("index"); }}for(k = 0; k < my_input.length; k++){ my_input[k].oninput = function(){ values_to_be_inserted = this.value.replace(/,\t/g, ","); values_to_be_inserted = values_to_be_inserted.replace(/, /g, ","); values_to_be_inserted = values_to_be_inserted.replace(/\t/g, ","); values_to_be_inserted = values_to_be_inserted.replace(/ /g, ","); values_to_be_inserted = values_to_be_inserted.replace(/,,/g, ","); values_to_be_inserted = values_to_be_inserted.split(","); j=0; for(i=0; i < my_input.length; i++) { populate_start_from = document.getElementById("populate_from_value_field").value; if(i >= populate_start_from && my_input[i].type == "text" && document.getElementById("populate_checkbox_field").checked == true) { if(j < values_to_be_inserted.length) my_input[i].value = values_to_be_inserted[j]; j++; } } } }</script> |
এটি কমা, স্পেস, Tab দিয়ে ডাটাগুলোকে পৃথক করে।
নিচে একটি টেস্ট পেইজ দেয়া হলো। উদাহরণস্বরূপ: 89, 85, 98, 985, 4512, 9 11 -এই ডাটাগুলো একসাথে সিলেক্ট করে কপি করতে পারেন।
২.
দ্বিতীয়টিও এইচটিএমএল ফরম পপুলেটর। তবে এটি টেক্চুয়াল ডাটাও (স্পেইস, কমা ইত্যাদি সহ) কপি করতে পারবে। এটা প্রত্যেকটি Tab কিংবা নতুন লাইন ব্রেক দিয়ে ডাটাগুলোকে পৃথক করবে।
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
| <script type="text/javascript">populate_checkbox_parent = document.createElement("div");populate_checkbox_parent.id = "populate_checkbox_parent_div";populate_checkbox_parent.style.position = "fixed";populate_checkbox_parent.style.top = 0;populate_checkbox_parent.style.right = 0;populate_checkbox_parent.innerHTML = "<span style='color:green;font-size:.8em'>Populate </span>";populate_checkbox = document.createElement("input");populate_checkbox.id = "populate_checkbox_field";populate_checkbox.type = "checkbox";populate_checkbox.checked = true;document.body.appendChild(populate_checkbox_parent);document.getElementById("populate_checkbox_parent_div").appendChild(populate_checkbox);start_value_container = document.createElement("input");start_value_container.type = "hidden";start_value_container.id = "populate_from_value_field";document.body.appendChild(start_value_container);my_input = document.getElementsByTagName("input");for(l = 0; l < my_input.length; l++){ my_input[l].setAttribute("index", l); my_input[l].onclick = function(){ document.getElementById("populate_from_value_field").value = this.getAttribute("index"); ta = document.createElement("textarea"); ta.id = "pastebin"; ta.class = "pastebin"; ta.style.position = "absolute"; ta.style.borderTop = "1px solid red"; ta.style.borderBottom = "1px solid red"; ta.style.borderLeft = "none"; ta.style.borderRight = "none"; ta.style.height = "20px"; ta.style.backgroundColor = "transparent"; ta.cols = this.size - 1; if(this.type == "text" && document.getElementById("populate_checkbox_field").checked == true) { this.style.backgroundColor = "green"; this.parentNode.insertBefore(ta, this); ta.focus(); } if(document.getElementById("pastebin") != null) { document.getElementById("pastebin").onblur = function(){ this.parentNode.removeChild(document.getElementById("pastebin")); my_input[document.getElementById("populate_from_value_field").value].style.backgroundColor = "white"; } document.getElementById("pastebin").oninput = function(){ values_to_be_inserted = this.value.replace(/\n/g, "\t"); values_to_be_inserted = values_to_be_inserted.split("\t"); j=0; for(i=0; i < my_input.length; i++) { populate_start_from = document.getElementById("populate_from_value_field").value; if(i >= populate_start_from && my_input[i].type == "text" && document.getElementById("populate_checkbox_field").checked == true) { if(j < values_to_be_inserted.length) { if(j == (values_to_be_inserted.length - 1) && values_to_be_inserted[j] == "") { my_input[i].value = my_input[i].value; } else { my_input[i].value = values_to_be_inserted[j]; } j++; if(j == values_to_be_inserted.length) { this.parentNode.removeChild(document.getElementById("pastebin")); my_input[populate_start_from].style.backgroundColor = "white"; } } } } } } }}</script> |
56
54
66
Karim
Dhaka, Bangladesh
-এই ডাটাগুলো একসাথে সিলেক্ট করে কপি করতে পারেন।
স্ক্রীপ্ট দুটোতে অবশ্য কিছু সীমাবদ্ধতা আছে। যেমন: মাঝখানে কোন textarea থাকলে সেটি ইগনর হয়ে পরের ঘরগুলোতে আবার ডাটা যাবে। তবে আশা করি, আপনারা নিজের মত করে স্ক্রীপ্টগুলো এডিট করে নিতে পারবেন যদি প্রয়োজন মনে করেন।
৩. টেবিল ফিল্টার বাই ওয়ার্ড/ফ্রেজ
প্রথমে, আপনার টেবিলের ওপেনিং ট্যাগের (<table> ট্যাগটির) উপরে এই কোডটুকু যোগ করতে হবে:
1
2
3
4
5
6
| <div style="padding:0 0 15px 0; clear:both; text-align:center;"> <b>Filter Table by Word(s):</b> <input type="text" size="35" id="input_filter" oninput="filter('[b]myTable[/b]', document.getElementById('input_filter').value)"> <input type="button" onclick="filter('[b]myTable[/b]', document.getElementById('input_filter').value)" id="filter_btn" value="Filter"> <input type="button" id="filter_clear_btn" value="Clear" onclick="document.getElementById('input_filter').value='';clear_filter('[b]myTable[/b]')"> </div> |
এরপরে, আপনার টেবিলের ইন্ড ট্যাগের (<table> ট্যাগটির) নিচে এই কোডটুকু যোগ করতে হবে:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| <script type="text/javascript">function filter(element, words){ var table_to_be_filtered = document.getElementById(element); var table_rows = table_to_be_filtered.getElementsByTagName("tbody")[0].getElementsByTagName("tr"); for (r = 0; r < table_rows.length; r++) { table_rows[r].style.display = "none"; words_actual = words.toLowerCase(); rows_text = table_rows[r].innerHTML; rows_text = rows_text.replace(/&/g, "&"); rows_text_actual = rows_text.toLowerCase(); if(rows_text_actual.indexOf(words_actual) >= 0) table_rows[r].style.display = "table-row"; }}function clear_filter(element){ var table_to_be_filtered = document.getElementById(element); var table_rows = table_to_be_filtered.getElementsByTagName("tbody")[0].getElementsByTagName("tr"); for (r = 0; r < table_rows.length; r++) { table_rows[r].style.display = "table-row"; }}</script> |
১. এখানে, "Filter" বাটনটি একটি বাহুল্যই বটে। কারণ, ফিল্টার বক্সে টাইপ করা মাত্রই ফিল্টার হয়ে যাচ্ছে। তবে, কোন কোন ব্রাউজার যদি "oninput" ইভেন্টটি সাপোর্ট না করে তাহলে এই "Filter" বাটনটি আবার প্রয়োজন হবে। অবশ্য "onkeyup" বা অন্য কীবোর্ড ইভেন্ট দিয়েও কাজ করা যায়। তবে, oninput-এর কিছু বাড়তি সুবিধা আছে।
২. প্রেফারেব্লী, হেডার/শিরোনাম রোটি <tbody> এলিমেন্টের ভেতরে না রেখে এর জন্য একটি <thead> এলিমেন্ট রাখবেন। নইলে, এটিও ফিল্টার-আউট হয়ে যাবে। এটা অবশ্য সমস্যা নয়, তবে দেখতে ভালো দেখাবে না অনেকের কাছে।
0 comments:
Post a Comment