text between two tags 1

[bobbiedigital]

Hi

im writing an edit table function for an rte, the rte before i started work on it inserted tables but it didnt have any functionality for editing table features such as border thickness etc, ive made it so the tables have a unique identifier when inserted into the rte, its only a number, i.e. name="1", im also using php, and what i wish to do is retrieve the table properties between the two table tags, here is the table code.


<table name="1" style="" 662px="" 56px="" border="1" cellpadding="4" cellspacing="0" height=""><tbody><tr><td style="" 1px="" dotted="" rgb(153="" 153="">&nbsp;</td><td style="" 1px="" dotted="" rgb(153="" 153="">&nbsp;</td></tr><tr><td style="" 1px="" dotted="" rgb(153="" 153="">&nbsp;</td><td style="" 1px="" dotted="" rgb(153="" 153="">&nbsp;</td></tr></tbody></table>
<br>
<table name="2" border="1" cellpadding="4" cellspacing="0" width="100%"><tbody><tr><td style="" 1px="" dotted="" rgb(153="" 153="">&nbsp;</td><td style="" 1px="" dotted="" rgb(153="" 153="">&nbsp;</td></tr><tr><td style="" 1px="" dotted="" rgb(153="" 153="">&nbsp;</td><td style="" 1px="" dotted="" rgb(153="" 153="">&nbsp;</td></tr></tbody></table>

im thinking i might need to create a regular expression and place the contents into an array.
one thing is im terrible with regular expressions!, another way i thought i could do it is by breaking up the <table>...</table> into strings, and then use substrings, what id have to do is limit, table names and border widths and cellspacing etc to only two digits, i dont see why people would want to go greater than single digits, then pass the values into an array.

Would any body be able to suggest any better methods??
Cheers for your help

Bobbie

 

[theniteowl]

You will need to change your name tags. You cannot begin a name field with a number. You could build the name with any text prefixing it like name="tb1".

There are two methods to modifying the table. You can retrieve the HTML of the page and parse it out to get the specific table you want to modify, alter it's properties and then write the altered HTML back to the page, or you can use DOM methods to directly manipulate the properties of the table without parsing the HTML tags.
For what you are doing the second option is the best. You will have to learn more about the Document Object Model but you have much finer control of the table and cells.


At my age I still learn something new every day, but I forget two others.

 

[bobbiedigital]

Ok

so i could use something like this??

document.getElementById(tb1).border = 1 if i wanted to change the border width??

what i wanted to do is create a php file that dynamically creates a list of tables and its attributes would i have to parse the html and use a bunch of for loops to achieve that?
once thats done i can see how the document object model can be useful. basically what im saying is i want to be able to click a button on the rte, and it will take the html code thats not saved yet and create a dynamic form of the number of tables in the rte, then use the DOM methods to modify the tables attributes directly.
or can i use other methods to pluck the html into a form?

Cheers

Bobbie

 

[theniteowl]

To use getElementById you will have to add an ID tag to your table. This allows you to easily retrieve the object and work with it's properites. I think that border would be under style so it would be more like:
document.getElementById('tb1').style.border = "1";

You can traverse the objects of the document even without having an ID or name to go by but then you have to be able to determine which one you are looking to modify and it's position in the page.

So you want your PHP page to read the already created HTML tables and read their properties? That would probably mean parsing out the page since PHP is running server side and the tables have not been rendered in the browser at that point. You would have to read the page in as if it were a text file so that the HTML is not rendered but treated as a string of text, then parse it out. It could get pretty complex if you were dealing with nested tables but you could do it.
You would not have to use regular expressions to accomplish this but they would greatly shorten up your code.
I am not good with regExp myself but with the aid of others on this site I put together a page parser in Javascript. I have not done it server-side though.


At my age I still learn something new every day, but I forget two others.

 

[bobbiedigital]

Ok how about this

if i take the entire html string then use the javascript split function to split the string everytime it sees the <table> tag, this will put it in an array, i can then truncate everything after the </table> tag and id have an array of tables, then id just parse it out to the form.

I think that would be ok ?

Cheers
Bobbie

 

[theniteowl]

Sounds like it would work. Any chance you would ever have nested tables? If so then you would have to make certain you did not get another table tag before you reached the close tag. You might also want to test to be sure you had the same number of open tags as you do close tags.
If this is generated dynamically then you should not have to worry.

Here is some code I have been working on that does some javascript parsing of a page. It is not exactly what you are doing but it might help.
This code grabs the HTML of the specified form then parses through it looking for form fields. It creates a formatted string of the form to pass to a server-side script that will send the completed form as an email message. It process each form field based on it's type and sets or changes it's properties as needed to lock down the emailed version so it cannot be easily edited and to make certain the emailed copy is as close to the original as possible though without any buttons or images.

In particular the regExp I use to parse through HTML should be useful to you. It allows you to find specific content in the HTML by specifying what characters it will start with, end with and optionally some text that must appear somewhere in the middle.

<html>
<head>
<link rel="stylesheet" href="test.css" type="text/css">

<style type="text/css">
H2 {
  font-family: Arial;
  font-size: 14pt;
}
</style>
<!--  This code will read any form data from within the EmailForm div tag and process it to become the output for an email
version of the form, thus removing the need to maintain two copies of the form code.
NOTE: If form is passed through email to a system that does not support HTML (like our secure email system)
the values will not show through. Might need to setup an alternate output.

USAGE:
1. Put the function into the head of your page.
2. Encapsulate the area of the form that you want to send as an email in a div tag with ID EmailForm. <div id="EmailForm">
3. Add this hidden field into your form: <input type="hidden" id="EmailOut" name="EmailOut">
4. Prevent sections of code from passing to email by enclosing it in a span tag: <span id="IgnoreMe">...code you do not want to show</span>

The function should be called prior to submitting the form.  You could call it directly from an onsubmit function in your
form tag or at the end of your validation code.  
You MUST pass the form object to the function.
Example: <form id="testform" method="post" action="mypage.asp" onsubmit="return formatform(testform)">
The name of the form passed to the formatform function should NOT be enclosed in quotes.  This passes a reference to
the form object, not just the form name.

In your ASP page you can retrieve the value of the hidden field EmailOut to be used as the body of your email message.

NOTE In order for a field to be processed by this script it MUST have a name tag.  
If you have a type="button" or type="submit" but no name tag with it, it will be ignored by the script.

What the code does:
Text and Textarea fields are altered to include the readOnly property.
Select fields: If the number of selected options (in a multiple select) exceeds the defined size then the
field size is altered to accomodate the number of selections. The non-selected options are included in the output
so that the field will maintain the same width as the original form but blank options are added in between the selected
and non-selected options to push them below the viewable window so they do not actually show in the output. The disabled property is set.
Radio and Checkbox fields have the Disabled property set.
Button and Submit types have their visibility style set to hidden.  This keeps them in the page so formatting is not disturbed,
but it removes the possibility that they could be clicked.

NOTE: In future revision might need to loop through entire page to remove embeded code in <script, <object, <A, tags and any action events.
NOTE: Need to look into <embed tags as well and possible support for a multipart/alternative mime type so that both
      a txt version and HTML version can be sent in the same email but only display in the correct format for the client.
-->
<script language="javascript">
function formatform(objForm) {
  //Grab all embeded and included styles.
  var outstyles = '';
  var arrstyles = document.styleSheets;
  for (var x=0;x<arrstyles.length;x++)
    outstyles = outstyles + '<style type="text/css">' + arrstyles[x].cssText + '</style>';
  var mydiv = escape(document.getElementById('EmailForm').innerHTML);
  //Replace carriage returns with the equivalent character entities.
  var obj = "%0D%0A";
  while (mydiv.match(obj)) { mydiv = mydiv.replace(obj, "&#13;&#10;"); }
  mydiv = unescape(mydiv);
  //Strip out any HTML within span tags containing the word IgnoreMe.
  var oRE = new RegExp('<span id="IgnoreMe">' + "[^>]*?" + '' + ".*?" + '</span>', "gi");
  mydiv = mydiv.replace(oRE, '');  
  var sStart='';
  var sMiddle='';
  var sNewString='';
  var elArr = objForm.elements;
  for(var i=0; i<elArr.length; i++) {
    //Loop through and process all form elements then replace the corresponding element in the mydiv HTML string with the modified one.
    var ischecked=(elArr[i].checked)?' CHECKED':'';
    var fldname=(elArr[i].name)?' name="new'+elArr[i].name+'"':'';
    var rawname=(elArr[i].name)?elArr[i].name:'';
    var sMiddle=(elArr[i].name)?' name='+elArr[i].name:'';
    var fldvalue=(elArr[i].value)?' value="'+elArr[i].value+'"':'';
    var rawvalue=(elArr[i].value)?elArr[i].value:'';
    var fldsize=(elArr[i].size)?' size="'+elArr[i].size+'"':'';
    var fldmaxlength=(elArr[i].maxLength)?' maxlength="'+elArr[i].maxLength+'"':'';
    var fldrows=(elArr[i].rows)?' rows="'+elArr[i].rows+'"':'';
    var fldcols=(elArr[i].cols)?' cols="'+elArr[i].cols+'"':'';
    var fldclass=(elArr[i].className)?' class="'+elArr[i].className+'"':'';
    var fldstyle=(elArr[i].style.cssText.length > 0)?' style="'+elArr[i].style.cssText+'"':'';
    switch (elArr[i].type) {
      case 'radio': sStart = '<INPUT'; sEnd = '>'; sNewString = '<INPUT type="radio" disabled' + ischecked + fldname + fldclass + fldvalue + fldstyle + '>'; break;
      case 'checkbox': sStart = '<INPUT'; sEnd = '>'; sNewString = '<INPUT type="checkbox" disabled' + ischecked + fldname + fldclass + fldvalue + fldstyle + '>'; break;
      case 'select-one': sOptions = getOptions(objForm, rawname); sStart = '<SELECT'; sEnd = '/SELECT>'; sNewString = '<SELECT disabled' + fldname + fldclass + fldstyle + ' size="' + sOptions.newfldsize + '">' + sOptions.outOptions + '</select>'; break;
      case 'select-multiple': sOptions = getOptions(objForm, rawname); sStart = '<SELECT'; sEnd = '/SELECT>'; sNewString = '<SELECT disabled' + fldname + fldclass + fldstyle + ' size="' + sOptions.newfldsize + '">' + sOptions.outOptions + '</select>'; break;
      case 'text': sStart = '<INPUT'; sEnd = '>'; sNewString = '<INPUT type="text" readOnly' + fldname + fldvalue + fldsize + fldmaxlength + fldclass + fldstyle + '>'; break;
      case 'textarea': sStart = '<TEXTAREA'; sEnd = '/TEXTAREA>'; sNewString = '<TEXTAREA readOnly' + fldname + fldrows + fldcols + fldclass + fldstyle + '>' + rawvalue + '</TEXTAREA>'; break;
      case 'button': sStart = '<INPUT'; sEnd = '>'; sNewString = '<INPUT type="button" style="visibility:hidden;"' + fldname + fldclass + '>'; break;
      case 'submit': sStart = '<INPUT'; sEnd = '>'; sNewString = '<INPUT type="submit" style="visibility:hidden;"' + fldname + fldclass + '>'; break;
      case 'reset': sStart = '<INPUT'; sEnd = '>'; sNewString = '<INPUT type="reset" style="visibility:hidden;"' + fldname + fldclass + '>'; break;
      default: sNewString = '';
    }
    if (sNewString != '' && sMiddle != '') {
      var oRE = new RegExp(sStart + "[^>]*?" + sMiddle + ".*?" + sEnd, "i");
      mydiv = mydiv.replace(oRE, sNewString);
    }
  }
  var outhtml='<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><META http-equiv=Content-Type content="text/html; charset=iso-8859-1">' + outstyles + '</head><body>' + mydiv + '</BODY></HTML>';
  document.getElementById('EmailOut').value = outhtml;
  return true;
}

function getOptions(f,e)
{ //Returns a formatted select field showing the selected options. Accomodates multiple selections.
  var arrOptions = f[e].options;
  var outsel = '';
  var outunsel = '';
  var outblank='';
  var cntsel = 0;
  for (var x=0;x<arrOptions.length;x++) {
    var outoption = '<option value="' + arrOptions[x].text + '">'+arrOptions[x].text+'</option>';
    if (arrOptions[x].selected) {
      outsel = outsel + outoption;
      cntsel++;
    }
    else {
      outunsel = outunsel + outoption;
    }
  }
  if (cntsel >= f[e].size) {
    var newfldsize = cntsel;
    var blanks = 0;
  }
  else {
    var newfldsize = f[e].size;
    for (var x=0;x<(f[e].size-cntsel);x++)
      outblank=outblank+'<option value=" "> </option>';
  }
  var outOptions = outsel + outblank + outunsel;
  return {outOptions : outOptions, newfldsize : newfldsize};
}
</script>
</head>
<body>
<form id="testform" method="post" action="testemail.asp" onsubmit="return formatform(testform)">
<div id="EmailForm">
<input name="company1" type="radio" value="1">List 1:<br>
<input type="radio" name="company1" value="2">List 2:<br>
<input type="checkbox" name="checkme">Check Me<br>
<br>

<select id="companylisting" name="companylisting" size="3" multiple>
  <option value="0">Select an option</option>
  <option value="1">Field 1</option>
  <option value="2">Field 2</option>
  <option value="3">Field 3</option>
  <option value="4">Field 4</option>
  <option value="5">Field 5</option>
  <option value="6">Field 6</option>
  <option value="7">Field 7</option>
  <option value="8">Field 8</option>
  <option value="9">Field 9</option>
  <option value="10">Field 10</option>
</select>
<br><br>
<select id="companylist2" name="companylist2" size="5" style="color: red; font-weight: bold;">
  <option value="0">Select an option first</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</select><br>
<input value="Dummy" type="button" name="dummy"><br>
<input type="text" name="text1" value="stuff" class="furnlink"><br><br>
<textarea rows='10' name='FNO' cols='40'>Text info in here</textarea>
</div>
<input type="submit" value="Go">
<input type="hidden" id="EmailOut" name="EmailOut">
</form>
</body>
</html>

At my age I still learn something new every day, but I forget two others.

 

[bobbiedigital]

Thanks very much thenightowl, you helped me get this thing going!

Cheers for the help Bobbie