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
Victor KimuraSEO, Web DeveloperAsked:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
fsze88Connect With a Mentor Commented:

<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
 
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
 
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
 
y0usufConnect With a Mentor Commented:
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
All Courses

From novice to tech pro — start learning today.