javascript - 如何将表行索引传递给 JavaScript 函数

标签 javascript html onchange drop-down-menu tablerow

我有一些正在创建 html 表的 php 代码。在其中我有一个表单,其中有不同的下拉菜单,其中包含 onChange 事件。我需要将表行索引传递给 javascript 函数。有什么办法可以做到这一点吗?如果可以的话请举个例子。谢谢!

下面列出了我的 php 代码:

<?php
echo"
  <table id='inputTable'>
    <form id='trade' name='trade' method='post' action=''>
    <tr id = 'labelRow0' name = 'labelRow0' style='display:table-row'>
      <td>Spread Type</td>
      <td>Option/Future</td>
      <td>Year</td>
      <td>Month</td>
      <td>Strike</td>
      <td>Call/Put</td>
      <td>Buy/Sell</td>
      <td>Price</td>
      <td>Quantity</td>
      <td>Delta</td>
      <td>House</td>
    </tr>
    <tr id = 'inputRow0' name = 'inputRow0' style='display:table-row'>
      <td>
        <select onchange='testChanges(0)' name='spreadType[]' id='spreadType0'>
        <option value=''>
        <option value='Spread'>Spread
        <option value='Fly'>Fly
        <option value='Straddle'>Straddle
        <option value='Strangle'>Strangle
        <option value='Tree'>Tree
        <option value='Condor'>Condor
        <option value='Ladder'>Ladder
        </select>
      </td>
      <td>
        <select name='optionFuture[]' id='optionFuture0'>
        <option value=''>
        <option value='Option'>Option
        <option value='Future'>Future
        </select>
      </td>
      <td>
        <select name='year[]' id='year0'>
        <option value=''>
        <option value='Front'>Front
        <option value='Short'>Short
        <option value='Red'>Red
        <option value='Green'>Green
        <option value='Blue'>Blue
        <option value='Gold'>Gold
        </select>
      </td>
      <td>
        <select name='month[]' id='month0'>
        <option value=''>
        <option value='January'>January
        <option value='February'>February
        <option value='March'>March
        <option value='April'>April
        <option value='May'>May
        <option value='June'>June
        <option value='July'>July
        <option value='August'>August
        <option value='September'>September
        <option value='October'>October
        <option value='November'>November
        <option value='December'>December
        </select>
      </td>
      <td>
        <select name='strike[]' id='strike0'>
        <option value=''>
        <option value='100'>100
        <option value='99'>99
        <option value='98'>98
        <option value='97'>97
        <option value='96'>96
        </select>
      </td>
      <td>
        <select onchange='testChanges()' name='callPut[]' id='callPut0'>
        <option value=''>
        <option value='Call'>Call
        <option value='Put'>Put
        </select>
      </td>
      <td>
        <select name='buySell[]' id='buySell0'>
        <option value=''>
        <option value='Buy'>Buy
        <option value='Sell'>Sell
        </select>
      </td>
      <td>
        <input type='text' name='price[]' id='price0' size='9'/>
      </td>
      <td>
        <input type='text' name='quantity[]' id='quantity0' size='9'/>
      </td>
      <td>
        <input type='text' name='delta[]' id='delta0' size='9'/>
      </td>
      <td>
        <select onchange='testChanges()' name='house[]' id='house0'>
        <option value=''>
        <option value='001 - First Options'>001 - First Options
        <option value='020 - Bache'>020 - Bache
        <option value='033 - FC Stone'>033 - FC Stone
        <option value='Other'>Other
        </select>
      </td>
    </tr>
    <tr id = 'otherRow0' name = 'otherRow' style='display:none'>
      <td><input type='text' name='spreadFormation[]' id='spreadFormation0' size='9'/></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td><input type='text' name='otherHouse[]' id='otherHouse0' size='22'/></td>
    </tr>";

$baseLabel = 'labelRow';
$baseInput = 'inputRow';
$baseStr = 'otherRow';
$baseOptionFuture = 'optionFuture';
$baseYear = 'year';
$baseMonth = 'month';
$baseStrike = 'strike';
$baseCallPut = 'callPut';
$baseBuySell = 'buySell';
$baseSpreadType = 'spreadType';
$basePrice = 'price';
$baseQuantity = 'quantity';
$baseDelta = 'delta';
$baseHouse = 'house';
$baseSpreadFormation = 'spreadFormation';
$baseOtherHouse = 'otherHouse';

for ( $i = 1; $i < 20; $i++ ) 
{
  $labelId = $baseLabel.$i;
  $inputRow = $baseInput.$i;
  $otherId = $baseStr.$i;
  $optionFutureId = $baseOptionFuture.$i;
  $yearId = $baseYear.$i;
  $monthId = $baseMonth.$i;
  $strikeId = $baseStrike.$i;
  $callPutId = $baseCallPut.$i;
  $buySellId = $baseBuySell.$i;
  $spreadTypeId = $baseSpreadType.$i;
  $priceId = $basePrice.$i;
  $quantityId = $baseQuantity.$i;
  $deltaId = $baseDelta.$i;
  $houseId = $baseHouse.$i;
  $spreadFormationId = $baseSpreadFormation.$i;
  $otherHouseId = $baseOtherHouse.$i;

  echo"
    <tr id = $labelId name = $labelId style='display:none'>
      <td>Spread Type</td>
      <td>Option/Future</td>
      <td>Year</td>
      <td>Month</td>
      <td>Strike</td>
      <td>Call/Put</td>
      <td>Buy/Sell</td>
      <td>Price</td>
      <td>Quantity</td>
      <td>Delta</td>
      <td>House</td>
    </tr>
    <tr id = $inputRow name = $inputRow style='display:none'>
      <td>
        <select onchange='testChanges()' name='spreadType[]' id='spreadType0'>
        <option value=''>
        <option value='Spread'>Spread
        <option value='Fly'>Fly
        <option value='Straddle'>Straddle
        <option value='Strangle'>Strangle
        <option value='Tree'>Tree
        <option value='Condor'>Condor
        <option value='Ladder'>Ladder
        </select>
      </td>
      <td>
        <select name='optionFuture[]' id=$optionFutureId>
        <option value=''>
        <option value='Option'>Option
        <option value='Future'>Future
        </select>
      </td>
      <td>
        <select name='year[]' id=$yearId>
        <option value=''>
        <option value='Front'>Front
        <option value='Short'>Short
        <option value='Red'>Red
        <option value='Green'>Green
        <option value='Blue'>Blue
        <option value='Gold'>Gold
        </select>
      </td>
      <td>
        <select name='month[]' id=$monthId>
        <option value=''>
        <option value='January'>January
        <option value='February'>February
        <option value='March'>March
        <option value='April'>April
        <option value='May'>May
        <option value='June'>June
        <option value='July'>July
        <option value='August'>August
        <option value='September'>September
        <option value='October'>October
        <option value='November'>November
        <option value='December'>December
        </select>
      </td>
      <td>
        <select name='strike[]' id=$strikeId>
        <option value=''>
        <option value='100'>100
        <option value='99'>99
        <option value='98'>98
        <option value='97'>97
        <option value='96'>96
        </select>
      </td>
      <td>
        <select onchange='testChanges()' name='callPut[]' id=$callPutId>
        <option value=''>
        <option value='Call'>Call
        <option value='Put'>Put
        </select>
      </td>
      <td>
        <select name='buySell[]' id=$buySellId>
        <option value=''>
        <option value='Buy'>Buy
        <option value='Sell'>Sell
        </select>
      </td>
      <td>
        <input type='text' name='price[]' id=$priceId size='9'/>
      </td>
      <td>
        <input type='text' name='quantity[]' id=$quantityId size='9'/>
      </td>
      <td>
        <input type='text' name='delta[]' id=$deltaId size='9'/>
      </td>
      <td>
        <select onchange='testChanges()' name='house[]' id = $houseId>
        <option value=''>
        <option value='001 - First Options'>001 - First Options
        <option value='020 - Bache'>020 - Bache
        <option value='033 - FC Stone'>033 - FC Stone
        <option value='Other'>Other
        </select>
      </td>
    </tr>
    <tr id = $otherId name = $otherId style='display:none'>
      <td><input type='text' name='spreadFormation[]' id=$spreadFormationId size='9'/></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td><input type='text' name='otherHouse[]' id=$otherHouseId size='22'/></td>
    </tr>
  ";
}
echo "</table>
  <input id='submitButton' type='submit' name='submit' type='submit' value='submit' />
  </form>";
?>

最佳答案

我习惯了 Zend,所以这就是我通常的做法,而不是回显 html,只需键入 html,然后使用 <?for:?>句法。就像下面这样。

 <table id='inputTable'>
    <form id='trade' name='trade' method='post' action=''>
    <tr id = 'labelRow0' name = 'labelRow0' style='display:table-row'>
      <td>Spread Type</td>
      <td>Option/Future</td>
      <td>Year</td>
      <td>Month</td>
      <td>Strike</td>
      <td>Call/Put</td>
      <td>Buy/Sell</td>
      <td>Price</td>
      <td>Quantity</td>
      <td>Delta</td>
      <td>House</td>
    </tr>
    <tr id = 'inputRow0' name = 'inputRow0' style='display:table-row'>
      <td>
        <select onchange='testChanges()' name='spreadType[]' id='spreadType0'>
        <option value=''>
        <option value='Spread'>Spread
        <option value='Fly'>Fly
        <option value='Straddle'>Straddle
        <option value='Strangle'>Strangle
        <option value='Tree'>Tree
        <option value='Condor'>Condor
        <option value='Ladder'>Ladder
        </select>
      </td>
      <td>
        <select name='optionFuture[]' id='optionFuture0'>
        <option value=''>
        <option value='Option'>Option
        <option value='Future'>Future
        </select>
      </td>
      <td>
        <select name='year[]' id='year0'>
        <option value=''>
        <option value='Front'>Front
        <option value='Short'>Short
        <option value='Red'>Red
        <option value='Green'>Green
        <option value='Blue'>Blue
        <option value='Gold'>Gold
        </select>
      </td>
      <td>
        <select name='month[]' id='month0'>
        <option value=''>
        <option value='January'>January
        <option value='February'>February
        <option value='March'>March
        <option value='April'>April
        <option value='May'>May
        <option value='June'>June
        <option value='July'>July
        <option value='August'>August
        <option value='September'>September
        <option value='October'>October
        <option value='November'>November
        <option value='December'>December
        </select>
      </td>
      <td>
        <select name='strike[]' id='strike0'>
        <option value=''>
        <option value='100'>100
        <option value='99'>99
        <option value='98'>98
        <option value='97'>97
        <option value='96'>96
        </select>
      </td>
      <td>
        <select onchange='testChanges()' name='callPut[]' id='callPut0'>
        <option value=''>
        <option value='Call'>Call
        <option value='Put'>Put
        </select>
      </td>
      <td>
        <select name='buySell[]' id='buySell0'>
        <option value=''>
        <option value='Buy'>Buy
        <option value='Sell'>Sell
        </select>
      </td>
      <td>
        <input type='text' name='price[]' id='price0' size='9'/>
      </td>
      <td>
        <input type='text' name='quantity[]' id='quantity0' size='9'/>
      </td>
      <td>
        <input type='text' name='delta[]' id='delta0' size='9'/>
      </td>
      <td>
        <select onchange='testChanges()' name='house[]' id='house0'>
        <option value=''>
        <option value='001 - First Options'>001 - First Options
        <option value='020 - Bache'>020 - Bache
        <option value='033 - FC Stone'>033 - FC Stone
        <option value='Other'>Other
        </select>
      </td>
    </tr>
    <tr id = 'otherRow0' name = 'otherRow' style='display:none'>
      <td><input type='text' name='spreadFormation[]' id='spreadFormation0' size='9'/></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td><input type='text' name='otherHouse[]' id='otherHouse0' size='22'/></td>
    </tr>";
<?php 
$baseLabel = 'labelRow';
$baseInput = 'inputRow';
$baseStr = 'otherRow';
$baseOptionFuture = 'optionFuture';
$baseYear = 'year';
$baseMonth = 'month';
$baseStrike = 'strike';
$baseCallPut = 'callPut';
$baseBuySell = 'buySell';
$baseSpreadType = 'spreadType';
$basePrice = 'price';
$baseQuantity = 'quantity';
$baseDelta = 'delta';
$baseHouse = 'house';
$baseSpreadFormation = 'spreadFormation';
$baseOtherHouse = 'otherHouse';
?>

<?php for ( $i = 1; $i < 20; $i++ ) :?>
<?php
  $labelId = $baseLabel.$i;
  $inputRow = $baseInput.$i;
  $otherId = $baseStr.$i;
  $optionFutureId = $baseOptionFuture.$i;
  $yearId = $baseYear.$i;
  $monthId = $baseMonth.$i;
  $strikeId = $baseStrike.$i;
  $callPutId = $baseCallPut.$i;
  $buySellId = $baseBuySell.$i;
  $spreadTypeId = $baseSpreadType.$i;
  $priceId = $basePrice.$i;
  $quantityId = $baseQuantity.$i;
  $deltaId = $baseDelta.$i;
  $houseId = $baseHouse.$i;
  $spreadFormationId = $baseSpreadFormation.$i;
  $otherHouseId = $baseOtherHouse.$i;
?>

    <tr id = <?= $labelId ?> name = <?= $labelId  ?>style='display:none'>
      <td>Spread Type</td>
      <td>Option/Future</td>
      <td>Year</td>
      <td>Month</td>
      <td>Strike</td>
      <td>Call/Put</td>
      <td>Buy/Sell</td>
      <td>Price</td>
      <td>Quantity</td>
      <td>Delta</td>
      <td>House</td>
    </tr>
    <tr id = <?= $inputRow ?> name = <?= $inputRow ?>style='display:none'>
      <td>
        <select onchange='testChanges()' name='spreadType[]' id='spreadType0'>
        <option value=''>
        <option value='Spread'>Spread
        <option value='Fly'>Fly
        <option value='Straddle'>Straddle
        <option value='Strangle'>Strangle
        <option value='Tree'>Tree
        <option value='Condor'>Condor
        <option value='Ladder'>Ladder
        </select>
      </td>
      <td>
        <select name='optionFuture[]' id=<?= $optionFutureId ?>>
        <option value=''>
        <option value='Option'>Option
        <option value='Future'>Future
        </select>
      </td>
      <td>
        <select name='year[]' id=<?= $yearId ?>>
        <option value=''>
        <option value='Front'>Front
        <option value='Short'>Short
        <option value='Red'>Red
        <option value='Green'>Green
        <option value='Blue'>Blue
        <option value='Gold'>Gold
        </select>
      </td>
      <td>
        <select name='month[]' id=<?= $monthId ?>>
        <option value=''>
        <option value='January'>January
        <option value='February'>February
        <option value='March'>March
        <option value='April'>April
        <option value='May'>May
        <option value='June'>June
        <option value='July'>July
        <option value='August'>August
        <option value='September'>September
        <option value='October'>October
        <option value='November'>November
        <option value='December'>December
        </select>
      </td>
      <td>
        <select name='strike[]' id=<?= $strikeId ?>>
        <option value=''>
        <option value='100'>100
        <option value='99'>99
        <option value='98'>98
        <option value='97'>97
        <option value='96'>96
        </select>
      </td>
      <td>
        <select onchange='testChanges(<?= $i ?>)' name='callPut[]' id= <?= $callPutId ?>>
        <option value=''>
        <option value='Call'>Call
        <option value='Put'>Put
        </select>
      </td>
      <td>
        <select name='buySell[]' id=<?= $buySellId ?>>
        <option value=''>
        <option value='Buy'>Buy
        <option value='Sell'>Sell
        </select>
      </td>
      <td>
        <input type='text' name='price[]' id=<?= $priceId ?> size='9'/>
      </td>
      <td>
        <input type='text' name='quantity[]' id= <?= $quantityId ?> size='9'/>
      </td>
      <td>
        <input type='text' name='delta[]' id= <?= $deltaId ?> size='9'/>
      </td>
      <td>
        <select onchange='testChanges(<?= $i ?>)' name='house[]' id = <?= $houseId ?>>
        <option value=''>
        <option value='001 - First Options'>001 - First Options
        <option value='020 - Bache'>020 - Bache
        <option value='033 - FC Stone'>033 - FC Stone
        <option value='Other'>Other
        </select>
      </td>
    </tr>
    <tr id = $otherId name = $otherId style='display:none'>
      <td><input type='text' name='spreadFormation[]' id= <?= $spreadFormationId ?> size='9'/></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td><input type='text' name='otherHouse[]' id= <?= $otherHouseId ?> size='22'/></td>
    </tr>


<? endfor; ?>



</table>
<input id='submitButton' type='submit' name='submit' type='submit' value='submit' />
 </form>

关于javascript - 如何将表行索引传递给 JavaScript 函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5359641/

相关文章:

javascript - 我应该在生命周期的哪一点修改我的 Prop ?

javascript - 在 JavaScript 函数运行时加载图像

javascript - 获取表中所有输入字段的名称

html - 如何显示 TableRow 的边框,但不显示 TableCells 的边框

javascript - 在单选按钮上执行 onChange 函数

php - 使用 javascript 和 php 创建 onChange 选择下拉菜单,但它不起作用

javascript - setTimeout 将参数从另一个函数传递给函数

jquery - 在多个 li 上应用悬停效果

javascript - 嵌套元素的绝对定位

javascript - 选择菜单刷新下一个选择菜单onChange