Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1059
  • Last Modified:

count row of <tr> then create <select><option> Javascript

Hi,

I'm trying to create some javascript to count the number of rows from a table:

<table border="1" id="t1">
<tr id="row1"><td>field 1</td></tr>
<tr id="row2"><td>field 2</td></tr>
<tr id="row3"><td>field 3</td></tr>
</table>

Then from this count create a <select><option> list. Notice the id and values are the same.

<form>
<select name="Append new row before this selected row" id="forAppendNewRow">
<option id="row1">field 1</option>
<option id="row2">field 2</option>
<option id="row3">field 3</option>
</select>
</form>

Thank you,
vkimura
0
Victor Kimura
Asked:
Victor Kimura
  • 3
2 Solutions
 
y0usufCommented:
As I see your question, I can suggest a very simplistic answer but you might have to tweak it a little to change that.

First get the the innerHtml of the table and then use regular expression and replace function to replace tr with option tag and just remove td tags and thats it!

if you are using any javascript library like jquery or dojo then it will be very easy to do this
0
 
fsze88Commented:

<table border="1" id="t1">
<tbody>
<tr id="row1"><td>field 1</td></tr>
<tr id="row2"><td>field 2</td></tr>
<tr id="row3"><td>field 99</td></tr>
</tbody>
</table>
 
<form>
<select name="selectionName" id="forAppendNewRow">
<option id="row1">field 1</option>
<option id="row2">field 2</option>
<option id="row3">field 3</option>
</select>
</form>
 
 
<script type="text/javascript">
var i;
var tabletag = document.getElementById("t1");
var theTableBody = tabletag.tBodies[0]
var tableBodychilds = theTableBody.childNodes;
var idArray = new Array();
var fieldArray = new Array();
var tdtag;
var numOfTr;
numOfTr = 0;
for (i=0;i<tableBodychilds.length ; i++){
  if (tableBodychilds[i].nodeName == 'TR'){
    numOfTr++;
//    alert(tableBodychilds[i].attributes['id'].value);
    idArray.push(tableBodychilds[i].attributes['id'].value);
    tdtag = tableBodychilds[i].firstChild;
    fieldArray.push(tdtag.innerHTML);
//    alert(tdtag.innerHTML);
  }
}
 
var selectionObj = document.getElementById("forAppendNewRow");
selectionObj.length=0;
 
for (i=0;i<numOfTr ; i++){
  var newOption = new Option(fieldArray[i], idArray[i]);;
 
  newOption.setAttribute( 'id', idArray[i] );
  selectionObj.options[i] = newOption;
}
 
 
</script>

Open in new window

0
 
Victor KimuraSEO, Web DeveloperAuthor Commented:
Hi y0usuf,

I don't wish to use dojo or jquery right now since I'm trying to learn javascript. Can you show me the code for it?

Thank you,
vkimura
0
 
y0usufCommented:
you mean in Javascript or Jquery?
0
 
y0usufCommented:
try the following.

// call this in onload 
function tableLoad() {
            var tabletag = document.getElementById("t1").innerHTML;
            var select = tabletag.replace(/tr/gi, "option").replace(/tbody/gi, "select").replace(/<td>|<\/td>/gi, "");
            alert(select);
        }

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now