Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]
Groups > comp.lang.javascript > #31478
| Newsgroups | comp.lang.javascript |
|---|---|
| Date | 2016-09-30 09:55 -0700 |
| Message-ID | <78daa021-c64d-4017-b761-17ea13fdcaee@googlegroups.com> (permalink) |
| Subject | How to write object-oriented JS function? |
| From | justaguy <lichunshen84@gmail.com> |
Hi,
The following two JS functions works perfectly fine, however, they are not object-oriented. Fyi, each function inserts TR or TRs and their children of TDs with or without attributes into certain position in a defined TABLE.
I wonder if folks who are truly JavaScript experts can turn them into better JS code (object-oriented and code re-use, use closure etc. when appropriate). Many thanks.
<table width="90%" align="center" border=0 cellspacing=0 cellpadding=0>
<tr>
<td colspan=8><strong>DEEDS</strong> </td>
</tr>
<tr>
<td></td>
<td align="left"> Document Type</td>
<td align="left"> INS #/Page</td>
<td align="left"> Cons./Loan Amt.</td>
<td align="left"> Dated</td>
<td align="left"> Recorded</td>
<td align="left" colSpan=2></td>
</tr>
<tr id="row1">
<td id="prop1">1</td>
<td valign="top"><input type="text" name="documentType1" id="documentType1" size="60"></td>
<td valign="top"><input type="text" id="insNumPage1" name="insNumPage1" size="15"></td>
<td valign="top"><input type="text" id="consLoanAmt1" name="consLoanAmt1" size="15"></td>
<td valign="top" nowrap=true> <input type="text" id="dated1" name="dated1" size="15"></td>
<td valign="top" nowrap=true><input type="text" name="recorded1" id="recorded1" size="15"></td>
<td valign="top" width="25%" colSpan=2><input type="button" name="blank1" id="blank1" value="+" size="5" onclick="addRow4Prop();">
</td>
</tr>
<tr>
<td></td>
<td colspan=7>
<input type="text" name="grantor1" id="grantor1" value="" size="70">
</td>
</tr>
<tr id="propFlag">
<td colspan=8></td>
</tr>
<tr height=25>
<td colspan=8><br/><br/></td>
</tr>
</table>
<table width="90%" align="center" border=0 cellspacing=0 cellpadding=0>
<tr>
<td colspan=8><strong>LIENS</strong></td>
</tr>
<tr>
<td></td>
<td align="left"> Name Searched</td> <td align="left"> All Clear</td> <td align="left"> Type</td> <td align="left">Case/Instr. #</td>
<td align="left"> Dated</td> <td align="left"></td> <td align="left"></td>
</tr>
<tr id="row2">
<td id="name1">1</td>
<td valign="top"><input type="text" name="nameSearched1" id="nameSearched1" size="70"></td>
<td valign="top"><input type="checkbox" id="allClear1" name="allClear1" size="15" value="1"></td>
<td valign="top"><input type="text" id="nType1" name="nType1" size="15"></td>
<td valign="top" nowrap=true> <input type="text" id="caseInstrNum1" name="caseInstrNum1" size="15"></td>
<td valign="top" nowrap=true><input type="text" name="nDated1" id="nDated1" size="15"></td>
<td valign="top" width="25%" colSpan=2><input type="button" name="Nblank1" id="Nblank1" value="+" size="5" onclick="addRow4Name();">
</td>
</tr>
<tr id="nameFlag">
<td colspan=8></td>
</tr>
<tr height=5>
<td colspan=8></td>
</tr>
<tr>
<td colspan=2>Name Search Checklist:</td>
<td>Bankruptcy <input type="checkbox" id="bankruptcy" name="bankruptcy" size="15" value="1"> </td>
<td>Child Support <input type="checkbox" id="childsupport" name="childsupport" size="15" value="1"></td>
<td>Judgments <input type="checkbox" id="judgements" name="judgements" size="15" value="1"></td>
<td colspan=4>Tax Liens <input type="checkbox" id="taxliens" name="taxliens" size="15" value="1">
UCC's<input type="checkbox" id="UCCs" name="UCCs" size="15" value="1"></td>
</tr>
<tr height=15>
<td colspan=8><br/><br/></td>
</tr>
</table>
<script>
// populate part related fields //
// counter
cnt = 1;
cn = 1;
function addRow4Prop() {
// validation
// alert('add row 4 property Rel called ');
// add row count after row process success
// implement business rule of max of 20 line items
if (cnt == 20) { return }
cnt += 1;
// debug
// document.getElementById('debug').innerHTML = cnt;
/* CREATE Next Row */
// find current row
// alert(cnt);
t = document.getElementById('partTBL');
tb = document.getElementById('TB');
currentRow = document.getElementById('row'+cnt);
if (currentRow === 'undefined') {currentRow='row1';}
// console.log(currentRow);
// row 1
// creating row and creating all cells
// creates a table row
var newrow = document.createElement("tr");
newrow.id = 'row'+cnt;
// newrow.setAttribute('id','row'+cnt);
// create 6 td
// Create a <td> element and a text node, make the text
// node the contents of the <td>, and put the <td> at
// the end of the table row
// cell 0
var cell = document.createElement("td");
// cell.setAttribute('id','del'+cnt);
// cell.id = 'del'+cnt;
var cellText = document.createElement('span');
// cellText.type = 'checkbox';
cellText.id = 'd'+cnt;
cellText.name = 'd'+cnt;
// cellText.size = "1";
cellText.innerHTML = cnt;
// cellText.hidden = true;
cell.appendChild(cellText);
newrow.appendChild(cell);
// remove a row in case of duplicate row; 2/16/2013
// syntax of object click: object.click = function; // no bracket after, see below
// cellText.onclick = remRow;
// document.getElementById('quoteContent').deleteRow('+cnt+')";
// cell 1
var cell = document.createElement("td");
var cellText = document.createElement('input');
cellText.type = 'text';
cellText.id = 'documentType'+cnt;
cellText.name = 'documentType'+cnt;
cellText.size = "60";
cell.appendChild(cellText);
newrow.appendChild(cell);
// cell 2
var cell = document.createElement("td");
var cellText = document.createElement('input');
cellText.type = 'text';
cellText.id = 'insNumPage'+cnt;
cellText.name = 'insNumPage'+cnt;
cellText.size = "15";
cell.appendChild(cellText);
newrow.appendChild(cell);
// cell 3
var cell = document.createElement("td");
var cellText = document.createElement('input');
cellText.type = 'text';
cellText.id = 'consLoanAmt'+cnt;
cellText.name = 'consLoanAmt'+cnt;
cellText.size = "15";
cell.appendChild(cellText);
newrow.appendChild(cell);
// cell 4
var cell = document.createElement("td");
var cellText = document.createElement('input');
cellText.type = 'text';
cellText.id = 'dated'+cnt;
cellText.name = 'dated'+cnt;
cellText.size = "15";
cell.appendChild(cellText);
newrow.appendChild(cell);
// cell 5
var cell = document.createElement("td");
var cellText = document.createElement('input');
cellText.type = 'text';
cellText.id = 'recorded'+cnt;
cellText.name = 'recorded'+cnt;
cellText.size = "15";
cell.appendChild(cellText);
newrow.appendChild(cell);
// cell 6
var cell = document.createElement("td");
var cellText = document.createElement('input');
cellText.type = 'button';
cellText.id = 'blank'+cnt;
cellText.name = 'blank'+cnt;
cellText.value = '+';
cellText.size = "20";
// cellText.hidden = true;
cell.appendChild(cellText);
newrow.appendChild(cell);
cellText.onclick = addRow4Prop;
// end of 6 td creation
// add the NEW row before TR id of "propFlag"
var p = document.getElementById('propFlag');
// find parent node of dis
var parentEl = p.parentNode;
parentEl.insertBefore(newrow,p);
// create row 2
// creating row and creating all cells
// creates a table row
var newrow = document.createElement("tr");
newrow.id = 'rowX'+cnt;
// cell 0
var cell = document.createElement("td");
newrow.appendChild(cell);
// cell 1
var cell = document.createElement("td");
cell.colSpan = "6";
var cellText = document.createElement('input');
cellText.type = 'text';
cellText.id = 'grantor'+cnt;
cellText.name = 'grantor'+cnt;
cellText.size = "60";
cell.appendChild(cellText);
newrow.appendChild(cell);
// add the NEW row before TR id of "propFlag"
var p = document.getElementById('propFlag');
// find parent node of dis
var parentEl = p.parentNode;
parentEl.insertBefore(newrow,p);
}
function addRow4Name() {
// validation
// alert('add row 4 property Rel called ');
// add row count after row process success
// implement business rule of max of 20 line items
if (cn == 20) { return }
cn += 1;
// debug
// document.getElementById('debug').innerHTML = cn;
/* CREATE Next Row */
// find current row
// alert(cn);
t = document.getElementById('partTBL');
tb = document.getElementById('TB');
currentRow = document.getElementById('row'+cn);
if (currentRow === 'undefined') {currentRow='row1';}
// console.log(currentRow);
// creating row and creating all cells
// creates a table row
var newrow = document.createElement("tr");
newrow.id = 'row'+cn;
// newrow.setAttribute('id','row'+cn);
// create 9 td
// Create a <td> element and a text node, make the text
// node the contents of the <td>, and put the <td> at
// the end of the table row
// cell 0
var cell = document.createElement("td");
// cell.setAttribute('id','del'+cn);
// cell.id = 'del'+cn;
var cellText = document.createElement('span');
// cellText.type = 'checkbox';
cellText.id = 'd2'+cn;
cellText.name = 'd2'+cn;
// cellText.size = "1";
// cellText.hidden = true;
cellText.innerHTML = cn;
cell.appendChild(cellText);
newrow.appendChild(cell);
// remove a row in case of duplicate row; 2/16/2013
// syntax of object click: object.click = function; // no bracket after, see below
// cellText.onclick = remRow;
// document.getElementById('quoteContent').deleteRow('+cn+')";
// cell 1
var cell = document.createElement("td");
var cellText = document.createElement('input');
cellText.type = 'text';
cellText.id = 'nameSearched'+cn;
cellText.name = 'nameSearched'+cn;
cellText.size = "60";
cell.appendChild(cellText);
newrow.appendChild(cell);
// cell 2
var cell = document.createElement("td");
var cellText = document.createElement('input');
cellText.type = 'checkbox';
cellText.id = 'allClear'+cn;
cellText.name = 'allClear'+cn;
cellText.value = '1';
cellText.size = "1";
cell.appendChild(cellText);
newrow.appendChild(cell);
// cell 3
var cell = document.createElement("td");
var cellText = document.createElement('input');
cellText.type = 'text';
cellText.id = 'nType'+cn;
cellText.name = 'nType'+cn;
cellText.size = "15";
cell.appendChild(cellText);
newrow.appendChild(cell);
// cell 4
var cell = document.createElement("td");
var cellText = document.createElement('input');
cellText.type = 'text';
cellText.id = 'caseInstrNum'+cn;
cellText.name = 'caseInstrNum'+cn;
cellText.size = "15";
cell.appendChild(cellText);
newrow.appendChild(cell);
// cell 5
var cell = document.createElement("td");
var cellText = document.createElement('input');
cellText.type = 'text';
cellText.id = 'nDated'+cn;
cellText.name = 'nDated'+cn;
cellText.size = "15";
cell.appendChild(cellText);
newrow.appendChild(cell);
// cell 6
var cell = document.createElement("td");
var cellText = document.createElement('input');
cellText.type = 'button';
cellText.id = 'Nblank'+cn;
cellText.name = 'Nblank'+cn;
cellText.size = "20";
cellText.value = '+';
cell.appendChild(cellText);
newrow.appendChild(cell);
cellText.onclick = addRow4Name;
// end of 6 td creation
// add the NEW row before TR id of "nameFlag"
var p = document.getElementById('nameFlag');
// find parent node of dis
var parentEl = p.parentNode;
parentEl.insertBefore(newrow,p);
}
</script>
Back to comp.lang.javascript | Previous | Next — Next in thread | Find similar | Unroll thread
How to write object-oriented JS function? justaguy <lichunshen84@gmail.com> - 2016-09-30 09:55 -0700
Re: How to write object-oriented JS function? John Harris <niam@jghnorth.org.uk.invalid> - 2016-10-01 15:16 +0100
Re: How to write object-oriented JS function? justaguy <lichunshen84@gmail.com> - 2016-10-01 09:23 -0700
Re: How to write object-oriented JS function? John Harris <niam@jghnorth.org.uk.invalid> - 2016-10-02 11:27 +0100
Re: How to write object-oriented JS function? justaguy <lichunshen84@gmail.com> - 2016-10-02 04:22 -0700
Re: How to write object-oriented JS function? justaguy <lichunshen84@gmail.com> - 2016-10-02 11:27 -0700
Re: How to write object-oriented JS function? John Harris <niam@jghnorth.org.uk.invalid> - 2016-10-03 10:26 +0100
Re: How to write object-oriented JS function? John Harris <niam@jghnorth.org.uk.invalid> - 2016-10-03 10:38 +0100
Re: How to write object-oriented JS function? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-10-03 12:01 +0200
Re: How to write object-oriented JS function? John Harris <niam@jghnorth.org.uk.invalid> - 2016-10-03 19:07 +0100
Re: How to write object-oriented JS function? justaguy <lichunshen84@gmail.com> - 2016-10-03 14:33 -0700
Re: How to write object-oriented JS function? John Harris <niam@jghnorth.org.uk.invalid> - 2016-10-04 17:59 +0100
Re: How to write object-oriented JS function? justaguy <lichunshen84@gmail.com> - 2016-10-04 20:10 -0700
Re: How to write object-oriented JS function? justaguy <lichunshen84@gmail.com> - 2016-10-05 04:47 -0700
Re: How to write object-oriented JS function? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-10-03 23:46 +0200
Re: How to write object-oriented JS function? $Bill <news@todbe.com> - 2016-10-03 15:22 -0700
Re: How to write object-oriented JS function? $Bill <news@todbe.com> - 2016-10-03 15:28 -0700
Re: How to write object-oriented JS function? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-10-04 09:16 +0200
Re: How to write object-oriented JS function? $Bill <news@todbe.com> - 2016-10-04 00:46 -0700
Re: How to write object-oriented JS function? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-10-04 14:56 +0200
Re: How to write object-oriented JS function? John Harris <niam@jghnorth.org.uk.invalid> - 2016-10-04 16:49 +0100
Re: How to write object-oriented JS function? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-10-04 19:55 +0200
csiph-web