p2p.wrox.com: Archives - javascript

javascript_howto thread: How to implement this..
Message #1 by srikanth_prabhala@s... on Tue, 11 Mar 2003 21:33:42
Dear All,

I have a table with a first column of name ( depicted as a hyperlink )and 
other columns with either a value 1 or 0.
When I click on the name ( the first column )hyperlink that particular row 
is selected and and all the columns ( except the name column ) become 
checkboxes with checked status for all the columns with a value 1 or 
unchecked status for all the columns with a value 0. Now I edit the row by 
checking/unchecking the checkboxes.
Next when I click another name hyperlink the earlier row selected gets 
back to the initial state with a value of 1 or 0 based on the edition done 
in the previous stage and the new row again becomes selected with all the 
checkboxes.
Can I do the above functionality with JavaScript without reloading the 
page again and again?
Please reply ASAP...

Thanks & Regards
Srikanth


<html>
<head>
<title>Table Edit</title>
<script type="text/jscript">

  function makeEditable(Row)
  {
    var arrNames = new Array("chkGender", "chkOver18", "chkMarried");
    var oTBody = Row.parentElement;
    for (var i = 0; i < oTBody.rows.length; i++)
    {
      var oCurrent = oTBody.rows[i];
      for (var j = 0; j < arrNames.length; j++)
      {
        var oCell = oCurrent.cells[j+1];
        var oNew;
        if (oCurrent === Row)
        {
          oNew = createCheckbox(arrNames[j], (oCell.innerText == "1"));
           oCell.replaceChild(oNew, oCell.firstChild);
        }
        else
        {
          if (oCell.firstChild.nodeName != "#text")
          {
            oNew = createCellDataFromCheckbox(oCell.firstChild);
             oCell.replaceChild(oNew, oCell.firstChild);
          }
        }
      }
    }
  }

  function createCheckbox(Name, Checked)
  {
    var sChecked = (Checked ? " CHECKED " : "");
    return document.createElement("<input type=\"checkbox\" name=\"" + 
Name 
+ "\"" + sChecked + ">");
  }

  function createCellDataFromCheckbox(Checkbox)
  {
    var sText = (Checkbox.checked ? "1" : "0");
    return document.createTextNode(sText);
  }

  function makeUneditable(Row)
  {

  }
</script>
</head>

<body bgcolor="#FFFFFF">
<table width="60%" align="center" cols="4" border="1">
  <thead>
    <tr><th>Name</th><th>Male</th><th>Over 18</th><th>Married</th></tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="#" 
onclick="makeEditable(this.parentElement.parentElement);return 
false;">Joe</a></td>
      <td align="center">1</td>
      <td align="center">1</td>
      <td align="center">0</td>
    </tr>
    <tr>
      <td><a href="#" 
onclick="makeEditable(this.parentElement.parentElement);return 
false;">Srikanth</a></td>
      <td align="center">1</td>
      <td align="center">1</td>
      <td align="center">1</td>
    </tr>
    <tr>
      <td><a href="#" 
onclick="makeEditable(this.parentElement.parentElement);return 
false;">Lara 
Croft</a></td>
      <td align="center">0</td>
      <td align="center">1</td>
      <td align="center">0</td>
    </tr>
  </tbody>
</table>
</body>
</html>

This worked fine, but if the columns are also hyperlinks and based on the 
clink clicked all the rows get highlighted(pertaining to the column 
clicked) with the all the fuctionality mentioned above, then how to 
implement it?
Return to Index
P2P Archives
