CODEWITHSUNDEEP
javascriptjqueryasp.netrepeater
Ram Singh
Ram Singh

Reputation: 6918

How to highlighted the selected row from repeater?

I have a repeater, and i just want that when i select or click on any row of it then that would be highlighted. I had tried some code of javascript which makes the selected row highlighted, but not unhighlighting when select any other row.My code is:-

<tr id="gh" style="cursor: pointer" onclick="Select(this);">

any javascript's and style's code is:-

<style type="text/css">
    .highlight
    {
        background-color: Red;
    }
    .selected
    {
        background-color: #ffdc87;
    }
</style>

<script type="text/javascript">
    function Select(obj) {
        obj.className = 'selected';
        var tbl = document.getElementById("Repaddressorbbl")
        var firstRow = tbl.getElementsByTagName("TR")[0];
        var tableRowId = tbl.rows[firstRow.getElementById("gh").parentNode.id];
        alert(tableRowId);
        var oldRow = tbl.rows[firstRow.getElementsByTagName("tr")[0].value];
        if (oldRow != null) {
            oldRow.className = '';
        }
        firstRow.getElementsByTagName("tr")[0].value = obj.rowIndex;

    }

</script>

We can do it simply with code behind but the matter is it should be done only with jquery or javascript.

Upvotes: 2

Views: 4930

Answers (3)

nnnnnn
nnnnnn

Reputation: 150010

Update for jQuery:

$(document).ready(function() {
   $("tr").click(function() {
      $(this).addClass("highlight").siblings().removeClass("highlight");
   }
}

Original answer:

If I understand you correctly, all of your table rows are defined like this:

<tr id="gh" style="cursor: pointer" onclick="Select(this);">

And you want to set a class on the most recently clicked row so it looks selected, while clearing said class from the previously clicked/selected row?

If so, a much simplified version of your function should do it:

var selectedRow = null;

function Select(obj) {
   if (obj != selectedRow) {
      if (selectedRow != null) {
         selectedRow.className = '';
      }
      obj.className = 'selected';
      selectedRow = obj;
   }
}

I don't understand what you're trying to do with the firstRow.getElementsByTagName("tr") stuff. Have you got nested tables?

Upvotes: 0

Manuel van Rijn
Manuel van Rijn

Reputation: 10305

i've added a function to select elements with a specific classname so you can easly search the dom for elements with that class

onload=function(){
    if (document.getElementsByClassName == undefined) {
        document.getElementsByClassName = function(className)
        {
            var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
            var allElements = document.getElementsByTagName("*");
            var results = [];

            var element;
            for (var i = 0; (element = allElements[i]) != null; i++) {
                var elementClass = element.className;
                if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
                    results.push(element);
            }

            return results;
        }
    }
}
function Select(obj) {
    var oldRow = document.getElementsByClassName('selected');
    if(oldRow.length > 0)
        oldRow[0].className = '';
    obj.className = 'selected';
}

Upvotes: 0

Pieter
Pieter

Reputation: 3399

You can use code similar to this:

var INDEX = $(this).parent().children().index($(this));
$('#Repaddressorbbl tr:nth-child(' + INDEX + ')').addClass("highlight") 
                        .siblings()
                        .removeClass("highlight");  // remove css class from other rows

It gets the rownumber of the TR and adds a CSS class while removing the same class from all other TRs.

Upvotes: 3

Related Questions