Question

我动态地（点击单选按钮）将一行的内部html（在表格中）复制到其他行，但是在删除一些元素之后。

var a = document.getElementById('copyrow' + e).innerHTML;
a = a.replace('<input type="radio" name="selectradio" id="shareredio"+e "" a="" href="#" onclick="setText("+e");">',"")
    .replace('<div class="custom-radio" style="margin-top:50px;">',"")
    .replace('<label for="shareredio"+e""></label>',"")
    .replace('<input type="checkbox" name="sharecheck" id="sharecheck"+e"">',"")
    .replace('<label for="sharecheck"+e""></label>',"")
    .replace('Share fare',"");

document.getElementById('copyDiv').innerHTML = a;

我对javascript知之甚少，但如果还有更好的方法，那么请帮忙......

Answer 1

这可能不是最好的方法，但我想我至少会给你一个答案。这是使用jQuery来操作DOM。

var $a = $('#copyrow'+e).clone();
$a.find('input#shareredio'+e).remove();
$a.find('div.custom-radio').remove();
$a.find('label[for="shareredio'+e+'"]').remove();
$a.find('input#sharecheck'+e).remove();
$a.find('label[for="sharecheck'+e+'"]').remove();

var result = $a.html().replace('Share fare', "");

$('#copyDiv').html(result);

Answer 2

这样的事情？

$(document).ready(function() {
    $('.copy').on('change', function(){
        if($('.copy:checked').val() == 'yes'){
            $('.table2').find('.rowContents1').html($('.table1').find('.rowContents1').html());
            $('.table2').find('.rowContents2').html($('.table1').find('.rowContents2').html());
            $('.table2').find('.rowContents3').html($('.table1').find('.rowContents3').html());
        }
        else {
            $('.table2').find('.rowContents1').html('');
            $('.table2').find('.rowContents2').html('');
            $('.table2').find('.rowContents3').html('');
        }
    });
});

table {
    border: 1px solid gray;
}
td, th {
    border: 1px solid gray;
    padding: 5px;
    text-align: center;
}
div{
    display: inline-block;
    margin-right: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Copy Contents Over?<br/>
<input type="radio" class="copy" value="yes" name="copyRadio"/> Yes
<input type="radio" class="copy" value="no" name="copyRadio"/> No
<br/><br/>
<div>
    Table1
    <table class="table1">
        <header>
            <tr>
                <th>Row Number</th>
                <th>Row Contents</th>
            </tr>
        </header>
        <body>
            <tr>
                <td class="rowNum1">1</td>
                <td class="rowContents1">This is the Contents of Row 1</td>
            </tr>
            <tr>
                <td class="rowNum2">2</td>
                <td class="rowContents2">This is the Contents of Row 2</td>
            </tr>
            <tr>
                <td class="rowNum3">3</td>
                <td class="rowContents3">This is the Contents of Row 3</td>
            </tr>
        </body>
    </table>
</div>
<div>
    Table2
    <table class="table2">
        <header>
            <tr>
                <th>Row Number</th>
                <th>Row Contents</th>
            </tr>
        </header>
        <body>
            <tr>
                <td class="rowNum1">1</td>
                <td class="rowContents1"></td>
            </tr>
            <tr>
                <td class="rowNum2">2</td>
                <td class="rowContents2"></td>
            </tr>
            <tr>
                <td class="rowNum3">3</td>
                <td class="rowContents3"></td>
            </tr>
        </body>
    </table>
</div>

我使用.html()重写每个td内的内容。 .find()函数只遍历元素树并找到后代$('.table2').find('.rowContents1')在类.table2的元素中说，找到类.rowContents1的后代。

希望这有助于您正在寻找

如何使用javascript替换innerhtml中的值

2 个答案: