找到最接近的輸入值並將其複製到列中的其餘單元格jquery

Question

我想獲取最接近輸入框的值，並將這些值複製到該列中的其餘單元格中。例如，如果用戶點擊第一列的複選框，並且該列中的任何一行有值，則該值必須僅將該值複製到該列中的其餘單元格。 我已經試過到目前爲止

$("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> 

Answer 1

這是我的Javascript實現：

$("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/

Answer 2

我已經重新設計你的榜樣，以實現我相信是你想要的效果：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); 
      } 
     }); 
    } 
}); 

Answer 3

一個更通用的解決方案是不通過類中的列，而是通過元素的索引（的<tr>第n個孩子）：

$("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); 
     }); 
    } 
}); 

我已經將它設置在JSFiddle

另外，根據您的問題，我不確定是否需要對元素進行「：checked」測試。您描述的功能似乎不符合複選框的用途（開/關選擇器），它反而描述了第一次單擊元素時的一次性操作。