如何找到具有連接特定類別的TR，並得到各TD的細節 - jQuery的

請看看這個小提琴 https://jsfiddle.net/shaswatatripathy/y7jqb5hp/7/如何找到具有連接特定類別的TR，並得到各TD的細節 - jQuery的

function getdetails(row) { 
 
    $("#tableID tbody tr").each(function() { 
 
    $(this).removeClass("highlightRowSelected"); 
 
    }); 
 
    $(row).addClass("highlightRowSelected"); 
 
} 
 

 
function DetailsOfTheSelectedRows() { 
 
    $.each($("#tableID tbody tr.highlightRowSelected"), function() { 
 
    $('#txtBoxValue').value = $(this).find('td:eq(1)').text(); 
 
    }); 
 
}

table { 
 
    font-family: arial, sans-serif; 
 
    border-collapse: collapse; 
 
    width: 100%; 
 
} 
 

 
td, 
 
th { 
 
    border: 1px solid #dddddd; 
 
    text-align: left; 
 
    padding: 8px; 
 
} 
 

 
.highlightRowSelected { 
 
    background-color: #e2e2e2; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="tableID"> 
 
    <tr onclick="getdetails(this)"> 
 
    <th>checkbox</th> 
 
    <th>Company</th> 
 
    <th>Contact</th> 
 
    <th>Country</th> 
 
    </tr> 
 
    <tr onclick="getdetails(this)"> 
 
    <td><input name="eachRow" type="checkbox" /> </td> 
 
    <td>Alfreds </td> 
 
    <td>Maria </td> 
 
    <td>Germany</td> 
 
    </tr> 
 
    <tr onclick="getdetails(this)"> 
 
    <td><input name="eachRow" type="checkbox" /> </td> 
 
    <td>Centro </td> 
 
    <td>Francisco </td> 
 
    <td>Mexico</td> 
 
    </tr> 
 
    <tr onclick="getdetails(this)"> 
 
    <td><input name="eachRow" type="checkbox" /> </td> 
 
    <td>Ernst </td> 
 
    <td>Roland </td> 
 
    <td>Austria</td> 
 
</table> 
 

 
<input type="button" onclick="DetailsOfTheSelectedRows()" value="Selected Row" /> 
 

 
<input type="text" id="txtBoxValue" />

在實際工程整個TBODY是動態，所以不要更改Html和getdetails(row)函數

錶行可以有多個類動態添加到它們。

我的工作是讓只有該行其具有highlightRowSelected連接到它，獲得第一個字段的值，並顯示在文本框中

jQuery函數DetailsOfTheSelectedRows必須是動態的，也因此選擇應該在那裏，只一行將附加該類名稱。

所以如何寫DetailsOfTheSelectedRows：

來源

2017-05-05 tripathy

使用該類發現TR像'$（ 'tr.classname'）' – guradio

$（ '＃txtBoxValue'）值= $（'tr.highlightRowSelected。。 '）.find（' TD：當量（2）'）文本（）;嘗試這樣，沒有工作 – tripathy

'$（「＃txtBoxValue」）。val（$（「＃tableID tr.highlightRowSelected> td：first」）。text（））' –

我改變你的代碼

function DetailsOfTheSelectedRows() 
{ 
$.each($(".highlightRowSelected",'#tableID'), function() { 

     $('#txtBoxValue').val($(this).find('td:eq(1)').text()); 

    }); 

}

更新小提琴 https://jsfiddle.net/y7jqb5hp/9/

檢查它

來源

2017-05-05 08:18:45

一襯你DetailsOfTheSelectedRows（）函數中。 ..

function DetailsOfTheSelectedRows() { 
    $('#txtBoxValue').val($('#tableID tr.highlightRowSelected td:eq(1)').text()) 
}

這是你的小提琴，更新：https://jsfiddle.net/9cuoe5df/

來源

2017-05-05 08:20:56 Bumpy

如何找到具有連接特定類別的TR，並得到各TD的細節 - jQuery的

回答

相關問題