ansaurus

Question

How can I get and put a value into a certain column and row?

Answer 1

A:

Below is some code that you may find useful although your explaination of the problem is not very clear so its difficult to determine how useful. :)

You could do better with jQuery and its all "first pass" code - yes it's got global variables, could use a few more constants and mixes tables and divs :0 -but it solves the problem i think you have. Up to you to optimise and flavourise.

Change the computeValue function if you need a different computation. My understanding from what you've said is that you want the lower of the two intersected values to be displayed in the cell.

You might also want to look into things like DOM/Javascript fragments if you're going to be hammering on the DOM. This Url (towards the bottom) introduces the idea and why they are helpful.

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<script type="text/javascript">

function init() {
    var cmd = document.getElementById("cmdGenerate");
    cmd.onclick=generateGrid;
}

var _rowCount = 0;
var _colCount = 0;
var DEFAULT_WIDTH = 500;
var DEFAULT_HEIGHT = 500;
var DEFAULT_TBL_NAME = "tblSupplyDemand";

function generateGrid()
{
    // get grid size
    var txt = document.getElementById("txtRows");
    _rowCount = txt.value;
    txt = document.getElementById("txtCols");
    _colCount = txt.value;
    var srcHolder = document.getElementById("gridContainer");

    if(IsValidNumber(_rowCount) && IsValidNumber(_colCount) && (srcHolder != null) && (srcHolder.canHaveChildren))
    {
     srcHolder.innerHTML = "";
     var srcTable = document.createElement("table");
     srcTable.border = 1;
     srcTable.borderColor = "Black";
     srcTable.height = DEFAULT_HEIGHT;
     srcTable.width = DEFAULT_WIDTH;
     srcTable.id = DEFAULT_TBL_NAME;
     var tmpRow = null;
     srcHolder.appendChild(srcTable);
     var i;
     for(i=0; i<_rowCount; i++)
     {
              tmpRow = AppendRow(srcTable)
      AppendRowCells(tmpRow, _colCount, i, false);
      tmpRow = null;
     }
     tmpRow = AppendRow(srcTable)
     AppendRowCells(tmpRow, _colCount, i+1, true);
    }
}


function AppendRow(srcTable) {
    if(srcTable != null){
     return srcTable.insertRow();
    }
    else{
     alert("Error while creating table. Cause: Container Table is null!");
    }
}

function AppendRowCells(tmpRow, colCount, rowId, isDemandRow)
{
    var tmpCell = null;
    for(var j=0; j<colCount; j++)
    {
     if (isDemandRow)
     {
      // Dont append an input cell to bottom row last col
      if ((j<colCount)) {AppendSupplyDemandCell(tmpRow, rowId, j, isDemandRow);}
     }
     else {
      tmpCell = AppendCell(tmpRow);
      tmpCell.innerText = 0;
      tmpCell = null;
     }
    }
    if (!isDemandRow) {AppendSupplyDemandCell(tmpRow, rowId, j);}
}

function AppendCell(srcRow){
    if(srcRow != null){
     return srcRow.insertCell();
    }
    else
    {
     alert("Error while creating table. Cause: Container row is null!");
    }
}

function AppendSupplyDemandCell(srcRow, rowId, colId, isDemandRow){
    if(srcRow != null){
     var tmpCell = srcRow.insertCell();
     var cellHTML = '<input id="';  

     if (isDemandRow) {
      cellHTML += 'txtDemand_' + colId + '" onchange="demandChanged(this);"';
     }
     else {
      cellHTML += 'txtSupply_' + rowId + '" onchange="supplyChanged(this);"';   
     }

     cellHTML += ' style="width:45px" value="0"/>';
     tmpCell.innerHTML = cellHTML;
     return;
    }
    else
    {
     alert("Error while creating table. Cause: Container row is null!");
    }
}

function IsValidNumber(ipNum){
    if(isNaN(ipNum)){
     alert("Invalid Number!");
     return false;
    }
    else if(ipNum < 1){
     alert("Number should be greater than 0!");
     return false;
    }
    else
    {
     return true;
    }
}

function demandChanged(txt)
{
    var demandColId = txt.id.substring(10);
    var txtDemand = document.getElementById("txtDemand_" + demandColId);
    var txtSupply=null;
    var cell=null;
    var tbl = document.getElementById(DEFAULT_TBL_NAME);
    var rows = tbl.getElementsByTagName("tr");
    for (var i=0;i<_rowCount;i++)
    {
     txtSupply=document.getElementById("txtSupply_" + i);
     cell=rows[i].getElementsByTagName("td")[demandColId];
     updateIntersectCell(txtSupply, txtDemand, cell);
    }
}

function supplyChanged(txt)
{
    var supplyRowId = txt.id.substring(10);
    var txtSupply = document.getElementById("txtSupply_" + supplyRowId);
    var txtDemand = null;
    var cell=null;
    var tbl = document.getElementById(DEFAULT_TBL_NAME);
    var row = tbl.getElementsByTagName("tr")[supplyRowId];
    for (var i=0;i<_colCount;i++)
    {
     txtDemand=document.getElementById("txtDemand_" + i);
     cell=row.getElementsByTagName("td")[i];
     updateIntersectCell(txtSupply, txtDemand, cell);
    }
}

function updateIntersectCell(txtSupply, txtDemand, intersectCell)
{
    intersectCell.innerText = computeValue(txtSupply.value, txtDemand.value);
}

function computeValue(supplyValue, demandValue)
{
    // Do your specific calculation here - This return the lower value
    return (supplyValue>=demandValue)?demandValue:supplyValue; 
}

window.onload=init;
</script>
</head>

<body>
<div id="generatorControls" >
<table>
    <tr>
     <td>No. Of Rows: </td>
     <td><input type="text" id="txtRows" value="10" /></td>
    </tr>
    <tr>
     <td>No. Of Columns: </td>
     <td><input type="text" id="txtCols" value="10" /> </td>
    </tr>
    <tr>
     <td colspan="2" align="right"><input type="button" id="cmdGenerate" value="Generate Table" /></td>
    </tr>
</table>
</div>
<div id="gridContainer"></div>
</html>

intermension 2009-09-24 03:39:00

ansaurus

tags:

views:

answers:

How can I get and put a value into a certain column and row?

related questions