0

次のhtmlテーブルがあります-

<table cellpadding=0 cellspacing=0><tr><td height=\'30\' bgcolor=\'#CCCACA\'>
<font size=2 face=\'Arial\' color=\'#000000\'><b>&nbsp;Property</b></font>
</td><td bgcolor=\'#CCCACA\'>
<font size=2 face=\'Arial\' color=\'#000000\'><b>&nbsp;Value</b></font>
</td></tr><tr><td bgcolor=\'white\' width=\'200\' height=\'20\'>
<font size=2 face=\'Arial\'>&nbsp;First Name</font>
</td><td bgcolor=\'white\' width=\'300\'>
<font size=2 face=\'Arial\'>&nbsp;John</font>
</td></tr><tr><td bgcolor=\'#F3EFEF\' width=\'200\' height=\'20\'>
<font size=2 face=\'Arial\'>&nbsp;Contact</font>
</td><td bgcolor=\'#F3EFEF\' width=\'300\'>
<font size=2 face=\'Arial\'>&nbsp;number</font>
</td></tr><tr><td bgcolor=\'white\' width=\'200\' height=\'20\'>
<font size=2 face=\'Arial\'>&nbsp;Last Name</font>
</td><td bgcolor=\'white\' width=\'300\'><font size=2 face=\'Arial\'>&nbsp;Smith</font>
</td></tr></tr></table>

numberこのコードから値を抽出するために、Javascript で正規表現を使用しようとしています。私の問題は、テーブル内のすべての値の前にコード行があることです-

<font size=2 face=\'Arial\'>&nbsp;

が存在するため、1 つの値にローカライズできません。ただし、前述の行の6 回目のインスタンスnumberごとに値が発生することはわかっています。1.これを実装し、2.6番目の値を取得する方法がわからないにもかかわらず、正規表現で値を抽出できることは承知しています。&nbsp

編集

function showProperties2(){

var itemID = new String(objChart.getSelectedElements());
var props = new String(objChart.getItemsPropertyIDs(itemID));
var arrPropIDs = props.split(',');
var propertyHTML="<table cellpadding=0 cellspacing=0><tr><td height='30' bgcolor='#CCCACA'><font size=2 face='Arial' color='#000000'><b>&nbsp;Property</b></font></td><td bgcolor='#CCCACA'><font size=2 face='Arial' color='#000000'><b>&nbsp;Value</b></font></td></tr>";
var bgcolor="#F3EFEF";
var i=0;
for(i=0;i<arrPropIDs.length;i++){
    if(objChart.getPropertyValue(itemID, arrPropIDs[i])!=""){
        if(bgcolor=="#F3EFEF"){
            bgcolor = "white";
        }else{
            bgcolor = "#F3EFEF";
        }
        propertyHTML+="<tr><td bgcolor='"+bgcolor+"' width='200' height='20'>";
        propertyHTML+= "<font size=2 face='Arial' class='quack'>&nbsp;"+objChart.getPropertyDisplayName(itemID, arrPropIDs[i])+"</font>";
        propertyHTML+="</td><td bgcolor='"+bgcolor+"' width='300'>";
        propertyHTML+= "<font size=2 face='Arial' class='quack2'>&nbsp;"+objChart.getPropertyValue(itemID, arrPropIDs[i])+"</font>";
        propertyHTML+="</td></tr>";
    }
}
propertyHTML+="</tr></table>";
propertyWindow(propertyHTML, "Properties");


}

前は、テーブルを作成する方法です。

4

2 に答える 2

1

jQueryの使用を気にしない場合は、これでうまくいくかもしれません

function getNumber(table) {
    // Set the variable, tableNumber to an error message of sorts
    var tableNumber = "No number found";
    // Loop through all cells
    $(table + ' td').each(function(){
        $(this).css('background', 'red');
        // Tell if a cell contains the text, '&nbsp;Contact'
        if ($(this).text().indexOf('Contact') != -1) {
            // set the variable tableNumber to the text of the next cell
            tableNumber = $(this).next().text();

        }
    });
        return tableNumber;


}

var report = getNumber('#number-table'); //for debugging

alert(report); //for debugging

次に、getNumber($('#table-id')) のような関数を呼び出すか、id がなくページにテーブルが 1 つしかない場合は単に getNumber($('table')) を呼び出します。

jsFiddle: http://jsfiddle.net/5Ggnz/1/

于 2012-07-26T12:53:43.717 に答える
1

適切にフォーマットされていれば、HTML ドキュメントを解析する際のトラブルが大幅に軽減されます。まず、HTML と CSS を読んでください。W3C バリデーターを使用して、コードのフォーマット方法や別の方法でエラーを見つけます。次のように、スタイルとフォーマットを分離することで、HTML をよりきれいにすることができます。

<table cellpadding="0" cellspacing="0">
     <tr class="odd">
         <th>Property</th>
         <th>Value</th>
     </tr>
     <tr class="even">
          <td>First Name</td>
          <td>John</td>
     </tr>
     <tr class="odd">
          <td>Contact</td>
          <td>number</td>
     </tr>
     <tr class="even">
          <td>Last Name</td>
          <td>Smith</td>
     </tr>
</table>

<style>
    td {
        color: #000;
        font: Arial;
        font-size: 0.8em;
        height: 20px;
        width: 300px;
        padding-left: 5px;
    }

    th {
        background-color: #CCCACA;
        font-size: 0.8em;
        height: 30px;
        text-align: left;
        padding-left: 5px;
    }

    .even td {
        background-color: white;
    }

    .odd td {
        background-color: #F3EFEF;
    }

    tr td:first-child {
        width: 200px;
    }
</style>

（現時点では、グレーの色合いを指定していますが、エスケープが行われているため、テーブルは青とターコイズでレンダリングされています。）

次に、テーブルの各「数値」セルをターゲットにする最も簡単な方法は、それらに個別のクラスを与えることです。

<tr>
    <td>Contact</td>
    <td class="phoneNumber">(01) 234 5678</td>
</tr>

次に、JavaScript で を使用してdocument.getElementsByClassName("phoneNumber")、または jQuery を使用している場合は、これをターゲットにすることができます$(".phoneNumber")。

于 2012-07-26T13:00:45.677 に答える