jQuery将td onclick值传递到其他表

jQuery Pass td onclick value to other table

本文关键字：其他值传 td onclick jQuery 更新时间：2023-09-26

我试图找到这个问题的解决方案，但我找不到合适的文章

    <div class="panel ui-widget-content" id="invoiceList">
<h2 class="ui-widget-header ui-corner-top" style="cursor: pointer; "><span>Invoices</span></h2>
    <table cellspacing='0' id='header' class="ui-widget">
        <tr>
            <th>Invoice Number</th>
             <th>Invoice Total</th>
        </tr>     
        <tr>
            <td><a href="#"  >INV-Error_Test1</a></td>
            <td>22.000000 USD</td>
        </tr>
        <tr>
            td><a href="#"  >INV-Error_Test2</a></td>
           <td>22.000000 USD</td>
        </tr>
    </table> 
</div>
<div class='panel ui-widget-content' id="invoiceErrors">
<h2>Select a Invoice from the left to view Error Details</h2>
  <div class='panel ui-widget-content' id="invoiceHeaders">
    <h2 class="ui-widget-header ui-corner-top" style="cursor: pointer; "><span>Invoice Headers</span></h2>
        <table class="ui-widget">
           <tr>
                <th>Invoice Number</th>
                 <th>Matter Number</th>
                <th>Invoice Total</th>
                <th>Invoice Tax Total</th>
                <th>Invoice Net Total</th>
          </tr>
        <tr>
            <td><%= invoiceNumber%></td>
            <td>CC_MAT_1221</td>
            <td>22.000000 USD</td>
            <td>22.000000 USD</td>
            <td>22.000000 USD</td>
        </tr>
        <td class = 'error'>File Error : The file does not contain any record delimiters or is in an unsupported format</td>
       </table> 
    </div>
    <div class='panel ui-widget-content' id="invoiceLines">
    <h2 class="ui-widget-header ui-corner-top" style="cursor: pointer; "><span>Invoice Line Items</span></h2>
     <table class="ui-widget">
        <tr>
            <th>Line Item Number</th>
            <th>Line Item Date</th>
            <th>Unit Cost</th>
            <th>Number of Units</th>
            <th>Line Item Total</th>
            <th>Task Code</th>
            <th>Expense Code</th>
            <th>Timekeeper ID</th>
            <th>Line Item Description</th>
        </tr>
        <tr>
            <td>2</td>
            <td>20150304</td>
            <td>2</td>
            <td>2</td>
            <td>6</td>
            <td></td>
            <td>E2</td>
            <td></td>
            <td></td>
        </tr>
        <td class='error'><%= invoiceNumber%> Line : 2 Invoice does not foot Reported = (22.0)Calculated (18.0)</td>
        <tr>
            <td>3</td>
            <td>20150306</td>
            <td>3</td>
            <td>3</td>
            <td>12</td>
            <td>T3</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    </div>
 </div>

这是jsfiddle链接http://jsfiddle.net/5n62md3m/

我能够从invoiceListdiv获得发票编号，如下所示

 $("#invoiceList a").click(function (e) {
console.log('invoice --->'+$(this).text());
});

但我不确定如何在invoiceErrorsdiv 中将其发送到invoiceNumber

有人能帮我吗？

更新答案

更好的是，多亏了其中一条注释，给单元格一个ID，例如"#invoice number error"，然后直接用jQuery针对它，不需要.find（），这样一切都会更快。

aka:

$("#invoiceList").find('a').click(function (e) {
    var invoiceNumber = $(this).text();
    $('#invoice-number-error').text(invoiceNumber);
});

旧答案

我建议给表单元格类，我更新了你的文件以反映一个变化：

我在#invoiceErrors下的单元格中添加了类"发票编号"。然后我更新了你的功能，看起来像这样：

$("#invoiceList").find('a').click(function (e) {
    var invoiceNumber = $(this).text();
    $('#invoiceErrors').find('.invoice-number').text(invoiceNumber);
});

给您的表一个类似mytable的id，然后执行：

$("#mytable td").eq(0).html( $(this).text() );

jQuery将td onclick值传递到其他表

jQuery Pass td onclick value to other table

工作jsFiddle