please tell me how can i access value of gridview's cell in javascript
i have a gridview witch contain 4 databound columns and 2 templated column. in one of template column i placed a dropdownlist(witch contain number of items). and 2nd column of gri开发者_开发问答dview contains prices. so in last column i want that when i select value in dropdownlist that value should multiply with 2nd column's value of datagrid and place result in last column of gridview using java script.
please tell me what to do..
You can get the row and column cell data using javascript. Here is a nice article on
Traversing an HTML table with JavaScript and DOM Interfaces
Also take a look at table.rows
Sample Code
HTML
<table>
<tr>
<td>
100
</td>
<td>
<select id="sel1" onchange="GetRowInd(this);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td></td>
</tr>
<tr>
<td>
100
</td>
<td>
<select id="sel2" onchange="GetRowInd(this);">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
<td>
</td>
</tr>
</table>
javascript
function GetRowInd(selectbox)
{
var parentTr = selectbox.parentNode.parentNode;
var secondCellVal = parseInt ( parentTr.cells[0].innerText , 10 );
var comboVal = parseInt ( selectbox.value , 10 );
parentTr.cells[2].innerText = secondCellVal * comboVal;
}
You have to use textContent instead of innerText to work in FF.
jQuery solution
Remove the onchange event from the combo box and use the following function
$(function() {
$(".selectbox").change ( function() {
var comboVal = $(this).val();
var parentTr = $(this).parents('tr');
var tdElem = parentTr.children('td');
var secondCellVal = tdElem.eq('0').text();
tdElem.eq('2').text ( comboVal * secondCellVal );
});
});
You should be using ClientID
property of the serverside controls and document.getElementById
method to access your controls using javascript.
You may find this article helpful for generating neat ClientIDs.
This forum discussion may also show you the right way out.
Upd.:
Sample html:
<table>
<tr>
<td>cellValue</td>
<td><span id="comboId">combo</span></td>
</tr>
</table>
Sample javasricpt:
// alerts "cellValue"
alert(document.getElementById("comboId").parentNode.parentNode.cells[0].innerHTML);
精彩评论