0

前のページに依存する値で埋められたテーブルがあります。それらの値は明らかにストラットで埋められています

しかし、私はそのすべてがあまり得意ではないので、HTMLのみで、またはページに配置できる小さなjavascriptで、このようなことを行うことができる簡単なものはありますか?

<Table>
<TR>
<TH>ID</TH>
<TD><s:property value="groupID" /><TD> <--Number generated by the page with struts
</TR>
<TR>
<TH>ID Value</TH>
<TD>foobar</TD> <-- the text I want to add in dependant on the number from the previous TD
</TH>
</Table>

それで、これを行う簡単な方法はありますか？HTML、CSS、JavaScript のソリューションでしょうか。

4

2 に答える 2

2

その正確な HTML を考えると、このような単純なスクリプトでそれができます。しかし、JavaScript を知らない場合は、自分が何をしているのかを理解できるように、本当に JavaScript を学ぶ必要があります。

<body>
    <Table>
        <TR>
            <TH>ID</TH>
            <TD><s:property value="groupID" /><TD>
        </TR>
        <TR>
            <TH>ID Value</TH>
            <TD>foobar</TD>
        </TR>
    </Table>
       <!-- The script is here so it won't run until the TABLE has loaded -->
    <script type="text/javascript">

          // This is a map of the struts values to your values
        var valueMap = {
            "1": "foo",
            "2": "bar",
            "3": "baz"
        };
          // Browser compatibility. Older IE uses 'innerText' instead of 'textContent'
        var textContent = ('textContent' in document) ? 'textContent' : 'innerText';

          // Get all the TD elements on the page
        var tds = document.getElementsByTagName('td');

          // Get the text content of the first TD (index 0)
        var text = tds[0][textContent];

          // Get the value from the map using the text we fetched above
        var value = valueMap[text];

          // Set the text content of the second TD (index 1) to the mapped value
        tds[1][textContent] = value;
    </script>
</body>
于 2012-10-25T15:23:26.943 に答える
1

値 'groupID' (最初の tr の td で設定) を 2 行目の td 要素に配置すると仮定すると、次の jQuery がそのトリックを実行します。

$(document).ready(function() {
    // Scrape the XML out of the TD containing the xml
    var tdXml = $('table tr').eq(0).find('td').html();
    // Grab the value of the value attribute (groupID)
    var value = $(tdXml).attr('value');
    // Set this value in the second row's TD
    $('table tr').eq(1).find('td').text(value);
}​);​

ここでjsFiddle

于 2012-10-25T15:55:51.907 に答える