CODEWITHSUNDEEP
jquery
user3557236
user3557236

Reputation: 299

Find closest input value and copy to the rest of the cells in the column jquery

I am trying to get the value of the closest input box which has value in it and copy those values to the rest of the cells in that column. For ex, if the user clicks on checkbox of the first column and if any row in that column has a value, it must copy that value to the rest of the cells in that column only. What I have tried so far

$("input[type='checkbox']").change(function () {
 if (this.checked) {
    var id = $(this).attr('id');
    $('.first').siblings('td').find("input").each(function () {
        var valStr=$(this).val;
        if(valStr!='')
{
    //I need to fill rest of the input boxes in this column with the value of the input box that has value
}
     });
    }
    });
         <table>
               <tr>
                   <th id="one" class="first">One <input type=checkbox id=chkOne></th>
                   <th id="two" class="sec">Two <input type=checkbox id=chkTwo></th>
                   <th id="three" class="third">Three <input type=checkbox id=chkThree></th>
               </tr>
               <tr>
                   <td class="first"><input type=text value="" /></td>
                   <td class="sec"><input type=text value="" /></td>
                   <td class="third"><input type=text value="" /></td>
               </tr>
               <tr>
                   <td class="first"><input type=text value="" /></td>
                   <td class="sec"><input type=text value="" /></td>
                   <td class="third"><input type=text value="" /></td>
               </tr>
           </table>

Upvotes: 2

Views: 726

Answers (3)

ascripter
ascripter

Reputation: 6223

A more generic solution would be not to identify the column via the class, but via the index of the element (n-th child of <tr>):

$("input[type='checkbox']").change(function () {
    if ($(this).is(":checked")) {
        // get the column you are in via .index()
        var col = $("th").index($(this).parent());
        var result = null;

        // find the first value in the column. Exclude the heading-row
        $("tr:gt(0)").each(function() {
            var $elem = $(this).find("input").eq(col);
            if (result === null && $elem.val() !== "") {
                // take the first value that is found
                result = $elem.val();
            }
        });

        // copy the value into every row of the column (excluding the header)
        $("tr:gt(0)").each(function() {
            var $elem = $(this).find("input").eq(col);
            $elem.val(result);
        });
    }
});

I've set it up in a JSFiddle

Also, depending on your problem I'm not sure if the test for ":checked" on the element is necessary. The functionality you describe doesn't seem to fit a checkbox's purpose (on/off selector), it rather describes a one-time action when an element is clicked the first time.

Upvotes: 1

JRulle
JRulle

Reputation: 7568

I have reworked your example to achieve what I believe is your desired effect: JSFIDDLE DEMO

$("input[type='checkbox']").change(function() {
    if (this.checked) {
        var id = $(this).attr('id');
        //determine parentClass because we need it to figure out which column we are working with
        var parentClass = $('#' + id).parent('th').attr('class');
        //create a copy variable that we will store the value to fill the column with in
        var copyStr = "";
        $('.' + parentClass).find("input[type='text']").each(function() {
            var valStr = $(this).val();
            if (valStr != '') {
                //store the value of the column in the copy string
                copyStr = valStr;
                //this exits the loop because we found a value to copy
                //if multiple values exist in a column it copies just the first one (but it will not overwrite other values because of the if statement in the next .each() loop)
                return false;
            }
        });
        //assign all cells in this column the value in the copy variable
        $('.' + parentClass).find("input[type='text']").each(function() {
            //check if cell has a value, if it does, do not overwrite it
            if($(this).val() == '') {
              $(this).val(copyStr);
            }
        });
    }
});

Upvotes: 3

cn123h
cn123h

Reputation: 2332

This is my Javascript implementation:

$("input[type='checkbox']").change(function () {
 if (this.checked) {
     var selectedClassName = $(this).parent("th").attr("class");
     $("td."+selectedClassName+" input").each(function() {
         var cellValue = $(this).val();
         if (cellValue != "") {
             $("td."+selectedClassName+" input").val(cellValue);
             return false;    // break
         }

     });
 }
});

http://jsfiddle.net/5t4r2xg8/

Upvotes: 1

Related Questions