মাঝে মধ্যে নিজের প্রয়োজনে কিছু ছোটখাট জাভাস্ক্রীপ্ট লিখতে হয়। এই টিউনে চেষ্টা করবো সেগুলো শেয়ার করতে। অন্যরাও চাইলে শেয়ার করতে পারেন।

আজকে শেয়ার করছি তিনটি জাভাস্ক্রীপ্ট।

১.

প্রথমটি দিয়ে স্প্রেডশীট কিংবা অন্য সোর্স থেকে থেকে নিউমারিক্যাল ডাটা কপি করে এইচটিএমএল ফরমের ইনপুট ফিল্ডসমূহে পপুলেট করা যায়। আপনি চাইলে যে কোন ইনপুট ফিল্ড থেকে পপুলেশন শুরু করতে পারেন।

আপনার পেইজের body ট্যাগ শেষ হওয়ার আগে স্ক্রীপ্টটি জুড়ে দিতে হবে।

<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>

পেইজের উপরের ডান দিকে একটা চেকবক্স থাকবে "Populate" লেখাটির পাশে, এটি চেক্‌ড অবস্থায় ডাটা পপুলেট হবে। না হয় স্বাভাবিক ইনপুট মোডে ডাটা এন্ট্রি করা যাবে।

এটি কমা, স্পেস, Tab দিয়ে ডাটাগুলোকে পৃথক করে।

নিচে একটি টেস্ট পেইজ দেয়া হলো। উদাহরণস্বরূপ: 89, 85, 98, 985, 4512, 9 11 -এই ডাটাগুলো একসাথে সিলেক্ট করে কপি করতে পারেন।

২.

দ্বিতীয়টিও এইচটিএমএল ফরম পপুলেটর। তবে এটি টেক্‌চুয়াল ডাটাও (স্পেইস, কমা ইত্যাদি সহ) কপি করতে পারবে। এটা প্রত্যেকটি Tab কিংবা নতুন লাইন ব্রেক দিয়ে ডাটাগুলোকে পৃথক করবে।

<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> ট্যাগটির) উপরে এই কোডটুকু যোগ করতে হবে:

 <div style="padding:0 0 15px 0; clear:both; text-align:center;">
		<b>Filter Table by Word(s):</b>&nbsp;
		<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>

এখানে "myTable" -এর জায়গায় আপনার টেবিলের ID টি দিয়ে দিতে হবে। বুঝতেই পারছেন, আপনার টেবিলের একটি ID থাকতে হবে।

এরপরে, আপনার টেবিলের ইন্ড ট্যাগের (<table> ট্যাগটির) নিচে এই কোডটুকু যোগ করতে হবে:

<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(/&amp;/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> এলিমেন্ট রাখবেন। নইলে, এটিও ফিল্টার-আউট হয়ে যাবে। এটা অবশ্য সমস্যা নয়, তবে দেখতে ভালো দেখাবে না অনেকের কাছে।

এখানে কোন কোড ভুল থাকলে আমার সাইটে দেখে আসবেন।

পুর্বে প্রকাশিত: এখানে

সময় পেলে আমার সাইট গুরে আসবেন।
আমার সাইট: ব্লগার বিডি ২৪