Question

我想单击按钮Day并打开参数= 1的报告，然后单击按钮Week并查看参数= 2的报告。这是我的代码

   @using Portal.Framework.Models;

<form id="reportParametersForm" method="GET" action="@string.Format("{0}/{1}", @Url.Content("~/Reports/View"), ViewBag.Report)">
    <fieldset style="padding: 0.2em 0 1.2em 0;height:60px">
        <legend style="margin: 0 1px 0 10px;padding: 3px 36px 3px 20px;background-color: #494949;color: white;font-size: 11pt;">
        @Html.Resource(String.Format("Report_{0}", ViewBag.Report as string))</legend>

    <table border="0" cellspacing="0" cellpadding = "0" style="font-size:x-small">        
        <tr valign="bottom" style="height:10px">
           <td width="30px" style="vertical-align: top">
            </td>
            <td width="30px" style="vertical-align: middle" align="center" nowrap="nowrap">
                <label style="font-size:small">
                    Time period</label>

                <input type="hidden" id="dailyReportUrl" value = "@Url?ReportParameter=1" />       
                <input class="button" id="showDailyReport" name="searchQueue" type="submit" value="Day" onClick="onClickHandler(this)" />

                <input type="hidden" id="weeklyReportUrl" value = "@Url?ReportParameter=2" />       
                <input class="button" id="showWeeklyReport" name="searchQueue" type="submit" value="Week" onClick="onClickHandler(this)" />

            </td>
        </tr>

    </table>
</fieldset>
</form>
<script type="text/javascript">

    $(document).ready(function () {

        $("#showDailyReport").click(function () {
            $("#weeklyReportPlaceholder").attr("src", "");
            $("#weeklyReportPlaceholder").attr("src", $("#dailyReportUrl").val());
        });

        $("#showWeeklyReport").click(function () {
            $("#weeklyReportPlaceholder").attr("src", "");
            $("#weeklyReportPlaceholder").attr("src", $("#weeklyReportUrl").val());
        });

    });

    function showDailyReport() {
        alert('daily');
    }

    function showWeekyReport() {
        alert('weekly');
    }

</script>

<script type="text/javascript">
    function onClickHandler(elem) {
        elem.style.background = 'red';
        elem.style.color = 'white';
    }

</script>

目前我只获得Day按钮，当我点击Week i时，我会从报告中获得相同的图表图像。另外，当我点击某个按钮改变颜色时，如何点击其他按钮返回其他按钮的原始颜色并更改点击按钮的颜色。到目前为止，我有这个，但不起作用，我得到2个更改按钮，更改颜色站立虽然我点击其他按钮

<script type="text/javascript">
    function onClickHandler(elem) {
        elem.style.background = 'red';
        elem.style.color = 'white';
    }
</script>

如何从报告中获取参数值并在单击该按钮时传递给按钮，如何更改仅活动按钮的颜色

Answer 1

试试这个：

$('input.button').click(function(){
  $(this).css({'background-color' : 'red', 'color' :'white'})

});

Answer 2

工作正常 Demo

<table border="0" cellspacing="0" cellpadding="0" style="font-size:x-small">
    <tr valign="bottom" style="height:10px">
        <td width="20px" style="vertical-align: top"></td>
        <td width="30px" style="vertical-align: middle" align="center" nowrap="nowrap">
            <label style="font-size:small">Time period</label>
            <input type="hidden" id="dailyReportUrl" value="@Url?ReportParameter=1" />
            <input class="button" id="showDailyReport" name="searchQueue" type="submit" value="Day" onClick="onClickHandler(this)" />
            <input type="hidden" id="weeklyReportUrl" value="@Url?ReportParameter=2" />
            <input class="button" id="showWeeklyReport" name="searchQueue" type="submit" value="Week" onClick="onClickHandler(this)" />
        </td>
    </tr>
</table>

<script>
    function onClickHandler(elem) {
        elem.style.background = 'red';
        elem.style.color = 'white';
    }
</script>

将参数值传递给按钮

2 个答案: